ExtJS5学习笔记Word文件下载.docx

1、）; ）;/body/html说明：（1）Ext.onReady（）:ExtJS Application的入口.就相当于Java或C#的main函数.（2）Ext.MessageBox.alert（）：弹出对话框。22:40style type= .x-form-unit height: 22px; line-height: padding-left: 2px; display: inline-block; inline; /style!- Ext.require（ Ext.form.*,Ext.layout.container.AbsoluteExt.window.Window）;Ext.o

2、nReady（function（） var form = Ext.create（Ext.form.Panel, layout:absolute url:save-form.php defaultType:textfield border: false, items: fieldLabel:Send To fieldWidth: 60, msgTarget:side allowBlank: vtype:email x: 5, y: name:to anchor:-5 / anchor width by right offset , Subject 35,subject5, 65, xtype:t

3、extarea style:margin:0 hideLabel: true,msg-5 -5 / anchor by right anf bottom offset var win = Ext.create（ autoShow: title:Resize Me width: 500, 300, minWidth: minHeight: 200,fit plain:true, form, maximizable: minimizable: listeners: minimize: function （win, opts） win.collapse（）; , buttons: text:Send

4、 ,Cancel）;2015年6月7日15:52:55 /初始化标签中的Ext:Qtip属性。 Ext.QuickTips.init（）; Ext.form.Field.prototype.msgTarget = ; /提交按钮处理方法 var btnsubmitclick = function （） 提示你点了确定按钮! /重置按钮点击时处理方法 var btnresetclick = function （） 你点了重置按钮!鼠标悬停 var btnresetmouseover = function （） 你鼠标悬停在重置按钮之上! /提交按钮 var btnsubmit = new Ext

5、.Button（提交 handler: btnsubmitclick /重置按钮 var btnreset = new Ext.Button（重置 listeners:mouseover: btnresetmouseover,click btnresetclick /用户名input var txtusername = new Ext.form.TextField（ 340, maxLength: 20,username用户名称 blankText:请输入用户名 maxLengthText:用户名不能超过20个字符 /密码input var txtpassword = new Ext.form

6、.TextField（ inputType:password密码请输入密码密码不能超过20个字符 /-数字字段开始-/ var numberfield = new Ext.form.NumberField（身高 380, decimalPrecision: 1, minValue: 0.01, maxValue: unitText: cm请输入身高 /-数字字段结束-/ /-隐藏域字段开始-/ var hiddenfield = new Ext.form.Hidden（userid value:1 /-隐藏域字段结束-/ /-日期字段开始-/ var datefield = new Ext.f

7、orm.DateField（出生日期 format:Y-m-d editable:请选择日期 /-日期字段结束-/ /表单 var form = new Ext.form.FormPanel（ frame:表单标题10px html:div style=padding:10px这里表单内容 txtusername, txtpassword, numberfield, hiddenfield, datefield, btnsubmit, btnreset /窗体 var win = new Ext.Window（窗口 476, 374,div这里是窗体内容 resizable: modal: c

8、losable: minimizable: buttonAlign:center form win.show（）;（1）var numberfield = new Ext.form.NumberField（）:创建一个新的NumberField数字文本框对象。（2）99行，decimalPrecision: 1：设置小数点后面的位数，当位数超过时系统会自动截断。（3）100行，minValue: 0.01：设置数字文本框最小值。（4）101行，maxValue: 200:设置最大值。（5）102行，unitText:：注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加

9、上 单位，所以在23行-43行对文本框进行了重写，重写时添加了属性unitText，并且在样式表中加了样式x-form-unit。（6）var hiddenfield = new Ext.form.Hidden（）：创建一个新的Hidden对象，隐藏字段用作参数占位符， 一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。（7）109行，name:Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。（8）110行，value:发送的值。（9）var datefield = new Ext.form.DateField（）：创建一个

10、新的Datefield日期对象,Extjs的日期为英文类型， 所以要加入翻译成中文的js，代码第8行位置。（10）116行，format:日期格式。（11）117行，editable: false：设置为不可编辑。54:49 140, 80, /-单选组开始-/ var radiogroup = new Ext.form.RadioGroup（性别 100,sex inputValue: boxLabel:男 checked: true女 /获取单选组的值 radiogroup.on（change, function （rdgroup, checked） alert（checked.getRa

11、wValue（）; /-单选组结束-/ /-复选组开始-/ var checkboxgroup = new Ext.form.CheckboxGroup（兴趣爱好 170,看书上网听音乐2 /获取复选组的值 checkboxgroup.on（, function （cbgroup, checked） for （var i = 0; i checked.length; i+） alert（checkedi.getRawValue（）; /-复选组结束-/ txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup,（1）var radiogroup = new Ext.form.RadioGroup（）:创建一个新的单选按钮组。（2）name:单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选， 如果name属性设置错误，该按钮将会被认为是其他组。（3）inputValue:选择框的值。（4）boxLabel:选择框后面的文字说明。（5）checked.getRawValue（）：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取， 而复选框可以多选，所以要循环取出。14:meta ht