ExtJS笔记_extjs的resizable: true

1. ext说明
   
   说明：
   (1)Ext.onReady():ExtJS Application的入口…就相当于Java或C#的main函数.
   (2)Ext.MessageBox.alert()：弹出对话框。
2. window组件
   

说明：
(1)var win = new Ext.Window({}):创建一个新的Window窗体对象。
(2)title: '窗口'：窗体的标题。
(3)width: 476,height: 374：宽度及高度。
(4)html: '<div>这里是窗体内容</div>'：窗体内部显示的html内容。
(5)resizable: true：是否可以调整窗体的大小，这里设置为 true。
(6)modal: true：是否为模态窗体[什么是模态窗体？当你打开这个窗体以后，如果不能对其他的窗体进行操作，那么这个窗体就是模态窗体，否则为非模态窗体]。
(7)closable:true：是否可以关闭，也可以理解为是否显示关闭按钮。
(8)maximizable: true：是否可以最大化，也可以理解为是否显示最大化按钮。
(9)minimizable: true：是否可以最小化，也可以理解为是否显示最小化按钮。
(10)win.show()：窗体展示。
属性 
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。 
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。 
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。 
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。 
closable：布尔类型，true表示显示关闭按钮，默认值为true。 
bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。 
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。 
closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。
方法 
show：打开窗体。 
hide：隐藏窗体。 
close：关闭窗体。
事件 
show：打开窗体时触法。 
hide：隐藏窗体时触法。 
close：关闭窗体时触法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3. 表单：FormPanel
   

说明：
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: '表单标题'：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
(3)style: 'margin:10px':表单的样式，加了个外10px的外边距。
(4)html: '<div style="padding:10px">这里表单内容</div>'：表单内显示html的内容。
form 组件常用的：属性、方法及事件
属性
width:整型，表单宽度。
height:整型，表单高度。
url:字符串，表单提交地址。
方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

说明：
(1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
   side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false：不允许文本框为空。
(5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
(6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
(7)fieldLabel: '用户名'：文本框前面显示的文字标题，如“用户名”，“密码”等。
(8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。
(9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1. 添加按钮

说明：
(1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。
(2)handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
(3)listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，
    鼠标悬停时执行方法btnresetmouseover。
(4)handler与listeners的区别：
    handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。
            handler是一个特殊的listener。
    listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件"click"，与"mouseover"事件，并且会顺序执行。
1
2
3
4
5
6
7
8
9

2. 数字文本和日期格式
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020031314123723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhaWZ1MjAwODYxMw==,size_16,color_FFFFFF,t_70

说明：
(1)var numberfield = new Ext.form.NumberField():创建一个新的NumberField数字文本框对象。
(2)99行，decimalPrecision: 1：设置小数点后面的位数，当位数超过时系统会自动截断。
(3)100行，minValue: 0.01：设置数字文本框最小值。
(4)101行，maxValue: 200:设置最大值。
(5)102行，unitText: ' cm'：注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上
          单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。
(6)var hiddenfield = new Ext.form.Hidden()：创建一个新的Hidden对象，隐藏字段用作参数占位符，
          一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。
(7)109行，name: 'userid'：Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。
(8)110行，value: '1'：发送的值。
(9)var datefield = new Ext.form.DateField()：创建一个新的Datefield日期对象,Extjs的日期为英文类型，
              所以要加入翻译成中文的js，代码第8行位置。
(10)116行，format: 'Y-m-d'：日期格式。
(11)117行，editable: false：设置为不可编辑。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 单选框和多选框
   

说明：
(1)var radiogroup = new Ext.form.RadioGroup():创建一个新的单选按钮组。
(2)name: 'sex'：单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选，
        如果name属性设置错误，该按钮将会被认为是其他组。
(3)inputValue: '0'：选择框的值。
(4)boxLabel: '男':选择框后面的文字说明。
(5)checked.getRawValue()：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，
        而复选框可以多选，所以要循环取出。
1
2
3
4
5
6
7
8

4. 下拉框
   

说明：
(1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。
(2)fields: ['id', 'name']：数据源包含两列，列名分别为'id','name'。
(3)data: [[1, '团员'], [2, '党员'], [3, '其他']]:数据源对应的数据，例：id:1,name:团员。
(4)var combobox = new Ext.form.ComboBox()：创建一个新的下拉列表。
(5)store: combostore:数据源为上面创建的数据源，这个属性是combobox的必需属性。
(6)displayField: 'name',valueField: 'id'：combobox对应数据源的显示列与值列，这两个属性也是必须的。
(7)mode: 'local'：指定数据源为本地数据源，如果是本地创建的数据源，该属性也是必须的，如果数据源来自于服务器，
    设置为'remote'表示数据源来自于服务器，关于服务器交互后面我们会讲解。
(8)triggerAction: 'all'：请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，
    如果设为all的话，每次下拉均显示全部选项。
(9)editable: false:默认情况下，combobox的内容是可以编辑的，该属性设置为false，
    使下拉列表只能选择不能编辑。
(10)combobox.on('select', function () {alert(combobox.getValue());}):选择时alert出下拉列表的值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

下拉框联动

说明：
(1)var combocitystore = new Ext.data.Store():创建一个新的数据源。
(2)proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' })：数据代理为http代理，地址为/App_Ashx/Demo/City.ashx。
(3)reader: new Ext.data.JsonReader({ root: 'data' },[{ name: 'id' }, { name: 'name'}]):读取json返回值根节点为data，对象列为id和name。
    这里要结合client与service观察,我在service端的输出如下：{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}
(4)comboboxcity.on('select', function () {}：市选择变化时触发事件。
(5)comboareastore.baseParams.id = comboboxcity.getValue()：注意，前面的comboareastore是区的数据源，
    当市变化时，我们给区的数据源加上个向service端发送的参数。
(6)comboareacity.setValue('')：把区的下拉列表设置为空，由于非空验证，Ext会提示用户“请选择区”，这个地方也可以把加载出来的第一个区
    显示在区的下拉列表中，具体请自行实现吧。        
(7)comboareastore.load()：区的数据源重新加载。
1
2
3
4
5
6
7
8
9
10
11

9. 图片上传
   

说明：
(1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
    官方解释如下：
    This may then be added to a Container as a child item.
    To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
(2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。
    官方实例为：
    var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
        }
    });
(3)var file = new Ext.form.TextField()：创建一个新的文件上传域。 
(4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。
(5)inputType: 'file'：表单类型为文件类型。
(6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。    
(7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';这个是原生态的js，把imageshow的值换成图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18