1 4.1 制作表单 2 var form = new Ext.form.FormPanel({ 3 title:\'form\', 4 defaultType:\'textfield\', 5 buttonAlign:\'center\', 6 frame:true, 7 width:220, 8 fieldDefaults:{ 9 labelAlign:\'right\', 10 labelWidth:70 11 }, 12 tiems:[{ //子组件; 13 fieldLabel:\'文本框\' //文本框组件; 14 }], 15 buttons:[{ 16 text:\'按钮\' 17 }] 18 }); 19 form.render(\'form\');
1 4.2 FormPanel和BasicForm详解 2 FormPanel是Ext.Panel的一个子类;实际上,表单的功能是在Ext.form.BasicForm中实现的;在获得Ext.form.FormPanel之后,随时都可以用getForm()方法获得BasicForm对象;可以在获得的BasicForm上执行"提交"和"重置"等操作; 3 可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一个部分,同时用items指定Ext.form.FormPanel内部的子组件;可以通过xtype来指定每个子组件的类型;
1 4.3 Ext支持的输入组件 2 4.3.1 控件继承图 3 >.Ext.from.Field 4 >1.Ext.form.Checkbox //复选框 5 Ext.form.Radio //单选框 6 >2.Ext.form.Hidden //隐藏域 7 >3.Ext.form.TextField //文本输入 8 >1.Ext.form.NumberField //数字输入控件 9 >2.Ext.form.TextArea //多行文本输入 10 >3.Ext.form.TriggerField //选择控件 11 >1.Ext.form.ComboBox //下拉控件 12 Ext.form.TimeField //时间选取控件 13 >2.Ext.form.DateField //日期控件 14 >4.Ext.HtmlEditor //编辑器控件 15 16 4.3.2 表单控件 17 Ext.onReady(function(){ 18 Ext.QuickTips.init(); //控件初始化; 20 21 var form = new Ext.form.FormPanel({ //实例化对象 22 buttonAlign:\'center\', //按钮居中; 23 width:600, 24 title:\'form\', 25 frame:true, //为组件提供圆角边框; 26 fieldDefaults:{ //对象内部的属性都会被应用到下面的实例中(注意优先级问题); 27 labelAlign:\'right\', //右浮动; 28 labelWidth:70 //宽度; 29 }, 30 items:[{ //单个组件或者是组件集合; 31 xtype:\'container\', 32 layout:\'column\', //布局为列; 33 items:[{ 34 columnWidth:.7, 35 xtype:\'fieldset\', 36 checkboxToggle:true, //控件组 组头;用复选框来设置控件的展开和收缩; 37 title:\'单纯输入\', //fieldset的legend; 38 autoHeight:true, 39 defaults:{width:300}, //应用所有的子组件的宽度; 40 defaultType:\'textfield\', 41 items:[{ //单个组件 42 fieldLabel:\'文本\', //域标签;文本域; 43 name:\'text\' 44 },{ 45 xtype:\'numberfield\', 46 fieldLabel:\'数字\', 47 name:\'number\' 48 },{ 49 xtype:\'combo\', 50 fieldLabel:\'选择\', 51 name:\'combo\', 52 store:new Ext.data.SimpleStore({ 53 fields:[\'value\',\'text\'], //将模型的字段绑定到轴; 54 data:[ 55 [\'value1\',\'text1\'], 56 [\'value2\',\'text2\'] 57 ] 58 }), 59 displayField:\'text\', // 60 valueField:\'value\', //相关的数据值绑定到ComboBox; 61 mode:\'local\', //? 62 emptyText:\'请选择\' 63 },{ 64 xtype:\'datefield\', //带有日期选择器下拉框并会自动进行日期验证的日期输入表单项; 65 feildLabel:\'日期\', 66 name:\'date\' 67 },{ 68 xtype:\'timefield\', //带有时间下拉框和自动时间验证的input表单项; 69 fieldLabel:\'时间\', 70 name:\'tiem\' 71 },{ 72 xtype:\'textarea\', 73 fieldLabel:\'多行\', 74 name:\'textarea\' 75 },{ 76 xtype:\'hidden\', 77 name:\'hidden\' 78 }] 79 },{ 80 xtype:\'container\', 81 columnWidth:.3, 82 layout:\'form\', 83 items:[{ 84 xtype:\'fieldset\', 85 checkboxToggle:true, 86 title:\'多选\', 87 autoHeight:true, 88 defaultType:\'checkbox\', 89 hideLabels:true, 90 style:\'margin-left:10px;\', 91 bodyStyle:\'margin-left:20px;\', 92 itmes:[{ 93 boxLabel:\'穿暖\', 94 name:\'check\', 95 value:\'1\', 96 checked:true, 97 width:auto 98 },{ 99 boxLabel:\'吃饱\', 100 name:\'check\', 101 value:\'2\', 102 checked:true, 103 width:\'auto\' 104 }] 105 },{ 106 xtype:\'fieldset\', 107 checkboxToggle:true, 108 title:\'单选\', 109 autoHeight:true, 110 defaultType:\'radio\', 111 hideLabels:true, 112 style:\'margin-left:10px;\', 113 bodyStyle:\'margin-left:20px;\', 114 items:[{ 115 boxLabel:\'自由\', 116 name:\'rad\', 117 value:\'1\', 118 checked:true 119 },{ 120 boxLabel:\'爱情\', 121 name:\'rad\', 122 value:\'2\' 123 }] 124 }] 125 }] 126 },{ 127 xtype:\'container\', 128 layout:\'form\', 129 items:[{ 130 labelAlign:\'top\', 131 xtype:\'htmleditor\', 132 fieldLabel:\'在线编辑器\', 133 id:\'editor\', 134 anchor:\'98%\', 135 height:200 136 }] 137 }], 138 buttons:[{ 139 text:\'保存\' 140 },{ 141 text:\'读取\' 142 },{ 143 text:\'取消\' 144 }] 145 }); 146 147 form.render(\'form\'); 148 }) 149 150 4.3.3 基本输入控件Ext.form.Field 151 Ext.form.Field是所有输入控件的基类;它定义了输入控件通用的属性和功能函数; 152 >1.页面显示样式:clearCls/cls/fieldClass,它们分别用来定义不同状态下输入框采用的样式; 153 >2.控件参数配置:autoCreate/disabled,它们主要用来设置输入控件生成的DOM内容和标签内容; 154 >3.数据有效性校验:invalidText/msgFx,它们用来设置数据校验的方式以及如何显示错误信息; 155 //这些控件默认会监听blur事件,如果校验失败,就会根据msgTarget中的设置显示错误信息;通常会被设置qtip,用QuickTip显示错误信息;其他参数值:title/side/under; 156 var field1 = new Ext.form.Field({ 157 fieldLabel:\'qtip\', 158 msgTarget:\'qtip\' 159 }); 160 field1.markInvalid(); 161 //markInvalid()函数用来显示field校验出错样式; 162 163 4.3.4 文本输入控件TextField 164 //专门用来输入文本数据的输入控件; 165 var text = new Ext.form.TextField({ 166 fieldLabel:\'单行\', //<label>标签内容; 167 allowBlank:false, //非空检测; 168 emptyText:\'空\', //输入框默认显示信息; 169 maxLength:50, //最大值; 170 minLength:10 //最小值; 171 }); 172 173 //表单控件最后都是放入表单中,然后渲染到div标签中; 174 var from = new Ext.form.FormPanel({ 175 title:\'form\', 176 frame:true, 177 items:[text], 178 renderTo:\'form\' 179 }); 180 181 4.3.5 多行文本输入控件TextArea 182 var area = new Ext.form.TextArea({ 183 width:200, //宽度; 184 grow:true, //根据输入内容修改自身高度; 185 preventScrollbars:true, //禁止滚动条,内容超出范围,自动隐藏; 186 fieldLabel:\'多行\', 187 ... 188 }) 189 190 4.3.6 日期输入控件DateField 191 var date = new Ext.form.DateField({ 192 fieldLabel:\'日期\', 193 emptyText:\'请选择\', 194 format:\'Y-m-d\', //如何保存并显示选中的日期; 195 disabledDays:[0,6] //禁止选择一周内的第一天和第七天; 196 }) 197 198 4.3.7 时间输入控件TimeField 199 var time = new Ext.form.TimeField({ 200 fieldLabel:\'时间\', 201 empty:\'请选择\', 202 minValue:\'10:00 AM\', //设置起始时间; 203 maxValue:\'14:00 PM\', 204 increment:30 //设置时间间隔; 205 }); 206 207 4.3.8 在线编辑器HtmlEditor 208 var html = new Ext.form.HtmlEditor({ 209 fieldLabel:\'在线编辑器\', 210 enableAlignments:true, 211 enableColors:true, 212 ... 213 }) 214 //应用对应的enable选项启用或禁用对应的功能按钮; 215 216 4.3.9 隐藏域Hidden 217 var hidden = new Ext.form.Hidden({ 218 name:\'hidden\' 219 }); 220 hidden.setValue(\'some thing\'); //对隐藏域赋值; 221 var value = hidden.getValue(); //取值; 222 223 4.3.10 如何使用input type="image" 224 //Ext没有提供对应的控件,我们可以根据需要使用inputType对Ext.form.TextField进行修改; 225 var image = new Ext.form.TextField({ 226 fieldLabel:\'证件照片\', 227 name:\'smallimg\', 228 inputType:\'image\', 229 inputAttrTpl:[\'src="../img/img1.png"\'], 230 width:140, 231 height:120 232 }); 233 //autoCreate使用的是DomHelper的语法,生成一个带有src的DOM;
1 4.4 ComboBox详解 2 //Ext中提供的ComboBox与HTML中原生的select无任何关系,它是用div重写的; 3 4 4.4.1 ComboBox简介 5 var data = [ //二维数组,ComboBox将要显示的数据; 6 [\'value1\',\'text1\'], 7 [\'value2\',\'text2\'] 8 ]; 9 10 var store = new Ext.data.ArrayStore({ //将二维数组转成对象; 11 fields:[\'value\',\'text\'], 12 data:data 13 }); 14 store.load(); 15 16 var combo = new Ext.form.ComboBox({ 17 store:stroe, //传入数据; 18 empty:\'请选择\', 19 mode:\'local\', //设置:数据已经读取到本地了; 20 valueField:\'value\', //读取store里的value(对应的在data里的value); 21 dispalyField:\'text\', //读取store里的text(实际是data里的text); 22 triggerAction:\'query\', //自动补全; 23 value:\'value1\', //设置combo的value值; 24 renderTo:\'combo\' //渲染到的必须是<imput id="combo" type="text" /> 25 }) 26 27 4.4.2 将Select转换成ComboBox 28 <select id="combo"> 29 <option value=\'value1\'>text1</option> 30 ... 31 </select> 32 33 var combo = new Ext.form.ComboBox({ 34 emptyText:\'请选择\', 35 mode:\'local\', 36 triggerAction:\'all\', 37 transform:\'combo\' //把id="combo"的select的数据抽离出来;添加到ComboBox里; 38 }); 39 40 4.4.3 ComboBox结构详解 41 var combo = new Ext.form.ComboBox({ 42 ... 43 hiddenName:\'comboId\' //让ComboBox又增加了一个type="hidden"的input,并且它的name和id都是"comboId" 44 }); 45 //若没有设置hiddenName,ComboBox提交的都是用户看到的text值;设置之后,才可以向后台提交text对应的value值; 46 47 4.4.4 ComboBox读取远程数据 48 var store = new Ext.data.Store({ 49 proxy:{ 50 type:\'ajax\', 51 url:\'xxx.txt\', 52 reader:{ 53 type:\'array\' 54 }, 55 fields:[ 56 {name:\'value\'},{name:\'text\'} 57 ] 58 } 59 }); 60 61 var combo = new Ext.form.ComboBox({ 62 .. 63 mode:\'remote\', //读取远程数据; 64 }); 65 66 4.4.5 ComboBox高级设置 67 >1.添加分页功能 68 var combo = new Ext.form.ComboBox({ 69 .. 70 mode:\'remote\', //参数必须是remote;因为分页的前提是先到store中分批获取数据; 71 minListWidth:200, //下拉列表的宽度; 72 pageSize:5 //每次显示多少条记录; 73 }); 74 75 >2.是否允许用户自己填写内容 76 //ComboBox的显示框是一个type="text"输入框,所以默认可以输入数据的; 77 var combo = new Ext.form.ComboBox({ 78 ... 79 editable:false //禁止用户填写数据; 80 }); 81 82 4.4.6 监听用户选择的数据 83 //设置事件机制监听ComboBox的事件,从而获知用户选择了哪条数据; 84 combo.on(\'select\',function(comboBox){ 85 alert(comboBox.getValue()+\'-\'+comboBox.getRawValue()); 86 //getValue():返回对象的value值(value); 87 //getRawValue():返回表单项的原始值(text); 88 }); 89 //on():要监听绑定的combo对象; 90 //select:要监听的事件;\ 91 //comboBox:是被监听的combo对象本身; 92 93 4.4.7 使用本地数据实现省/市/县级联 94 comboProvince.on(\'select\',function(comboBox){ 95 var province = comboBox.getValue(); 96 if(province == \'河北\'){ 97 storeCity.proxy.data = dataCityHebei; //动态设置市; 98 }else if (province == \'内蒙古\'){ 99 storeCity.proxy.data = dataCityNeimenggu; 100 } 101 }); 102 comboCity.on(\'select\',function(comboBox){ 103 var city = comboBox.getValue(); //动态设置区; 104 if(city == "唐山"){ 105 storeCounty.proxy.data = dataCountyTangshan; 106 }else{ 107 storeCounty.proxy.data = dataCountyUnknow; 108 } 109 }); 110 comboCounty.on(\'select\',function(comboBox){ 111 alert(comboProvince.getValue()+\'-\'+comboCity.getValue()+\'-\'+comboCounty.getValue()); 112 });
1 4.5 复选框和单选框 2 4.5.1 复选框 3 var form = new Ext.form.FormPanel({ 4 title:\'form\', 5 buttonAlign:\'center\', 6 frame:true, //提供圆角; 7 url:\'xxx.jsp\', 8 9 //Ext.form.Checkbox 10 items:[{ //在表单中添加控件容器; 11 xtype:\'fieldset\', //控件组,包装一组输入域的容器;渲染为HTML的fieldset; 12 title:\'多选\', //渲染为fieldset的legend; 13 autoHeigth:true, 14 defaultType:\'checkbox\', 15 hideLabels:true, 16 items:[ //在控件容器中添加复选框控件; 17 {boxLabel:\'多选一\',inputValue:\'1\',checked:true}, //默认选中; 18 {boxLabel:\'多选二\',inputValue:\'2\'}, 19 {boxLabel:\'多选三\',inputValue:\'3\'}, 20 ] 21 }], 22 23 buttons:[{ 24 text:\'提交\', 25 handler:function(){ 26 form.getForm.submit(); 27 } 28 }] 29 }); 30 form.render(\'form\'); 31 32 4.5.2 单选按钮 33 //单选按钮是继承自复选框的,所以Checkbox中的所有功能都能在Radio中使用; 34 items:[{ 35 xtype:\'fieldset\', 36 title:\'单选\', 37 defaultType:\'radio\', //findField(\'radio\')对应的field; 38 hideLabels:true, 39 items:[ 40 {boxLabel:\'单选一\',name:\'radio\',inputValue:\'1\',checked:true}, 41 {boxLabel:\'单选二\',name:\'radio\',inputValue:\'2\'} 42 //具有相同name值的Radio控件会放在同一组;这样保证单选功能; 43 ] 44 }], 45 buttons:[{ 46 text:\'提交\', 47 handler:.. 48 },{ 49 text:\'getGroupValue\', //添加一个按钮; 50 handler:function(){ //触发器; 51 Ext.Msg.alert(\'信息\',form.getForm().findField(\'radio\').getGroupValue()); 52 //信息弹出框;获取radio的inputValue值; 53 } 54 }] 55 56 4.5.3 CheckboxGroup和RadioGroup控件 57 //为复选框和单选按钮控件实现各种复杂的排列方式; 58 >1.横向排列 59 { 60 xtype:\'checkboxgroup\', //默认横排; 61 fieldLabel:\'自动布局\', 62 ... 63 } 64 >2.竖向排列 65 { 66 xtype:\'checkboxgroup\', 67 fieldLabel:\'单列\', 68 columns:1, //显示为一竖列; 69 ... 70 } 71 >3.多列排列 72 { 73 xtype:\'checkboxgroup\', 74 columns:3, //显示为三竖列; 75 vertical:true, //垂直优先; 76 itemsCls:\'x-check-group-alt\', //向组件添加Class; 77 ... 78 }
1 4.6 滑动条表单控件 2 //可以将滑动条作为一个表单空间爱你放在表单面板中进行布局,实现表单数据的修改/读取与提交功能; 3 >1.滑动条 4 var huadong = new Ext.form.FormPanel({ 5 widrth:400, 6 title:\'滑动条控件\', 7 bodyStyle:\'padding:10px;\', 8 renderTo:\'container\', 9 defaultType:\'sliderfield\', 10 11 defaults:{ 12 anchor:\'95%\', 13 tipText:function(thumb){ 14 return String(thumb.value)+\'%\'; 15 } 16 }, 17 items:[{ 18 fieldLabel:\'Sound Effects\', 19 value:50, 20 name:\'fx\' 21 },{ 22 fieldLabel:\'Ambient Sounds\', 23 value:80, 24 name:\'ambient\' 25 }] 26 }); 27 28 >2.多滑块滑动条 29 var horizontal = new Ext.Slider({ 30 renderTo:\'multi-slider-horizontal\', 31 width:214, 32 minValue:0, 33 maxValue:100, 34 values:[10,50,90], 35 plugins:new Ext.slider.Tip(); 36 })
1 4.7 表单布局 2 4.7.1 默认平铺布局 3 var form = new Ext.form.FormPanel({ 4 defaultType:\'textfiled\', 5 frame:true, 6 fieldDefaults:{ 7 labelWidth:60 8 }, 9 items:[{fieldLabel:\'默认布局\'}], 10 }); 11 12 4.7.2 平分列布局 13 //使用"layout:\'column\'"来说明下面要使用的是列布局;然后在items指定每列中使用\'columnWidth\'设置每列所占总宽度的百分比; 14 //须手动指定使用layout:\'form\',这样才能在每列中正常显示输入框和对应标签; 15 var from = new Ext.form.FormPanel({ 16 .. 17 items:[{ 18 layout:\'column\', //列布局; 19 items:[{ 20 columnWidth:0.4, //本列占总宽度的百分比; 21 layout:\'form\', //组件内部默认布局; 22 defaultType:\'textfield\',//以下组件为文本输入控件; 23 items:[ 24 {fieldLabel:\'平分列1\'}, 25 {fieldLabel:\'平分列2\'}, 26 ] 27 }] 28 }] 29 }); 30 31 4.7.3 在布局中使用fielset 32 //在标准HTML中,需把输入项都放到fieldset中,以此来显示分组结构; 33 items:[ 34 xtype:\'feildset\', //使用fieldset; 35 title:\'使用fieldset\', //fieldset的legend; 36 columnWidth:0.5, 37 lsyout:\'form\', 38 autoHeight:true, 39 defaultType:\'textfield\',//定义以下组件xtype; 40 items:[{fieldLabel:\'汉字\'}] 41 ] 42 43 4.7.4 在fieldset中使用布局 44 //创建FieldSet对象,包含分列布局,再传入到FormPanel中; 45 46 4.7.5 自定义布局 47 //因为Ext.form.FormPanel继承自Ext.Panel,所以可以使用layout和items提供各种内部布局形式; 48 //除了Ext.form.Field之类的输入控件外,还可以使用其他Panel来装饰表单; 49 //使用xtype:\'panel\',在它里边使用img来显示图片; 50 { 51 .. 52 items:[ 53 {fieldLabel:\'文字\',xtype:\'textfield\'}, 54 {xtype:\'panel\',html:\'<div><img src=\'user.png\' /></div>\'} 55 ] 56 }
1 4.8 数据校验 2 //在Firefox下校验失败,调用submit()也不会提交; 3 //在IE下必须先使用form.isValid()自行判断,如果返回false,就不能在调用submit(),否则仍然会将非法数据提交到后台; 4 Ext.QuickTips.init(); //提示功能所需函数; 5 new Ext.form.TextField({ 6 name:\'text\', 7 fieldLabel:\'不为空\', 8 allowBlank:false //输入框不能为空; 9 }); 10 11 4.8.2 最大长度和最小长度 12 new Ext.form.TextField({ 13 fieldLabel:\'字符长度\', 14 name:\'text\', 15 minLength:5, 16 maxLength:10 17 }); 18 19 4.8.3 借助vtype 20 //为vtype设置属性,即可校验; 21 new Ext.form.TextField({ 22 fieldLabel:\'vtype校验\', 23 name:\'text\', 24 vtype:\'email/url/alpha/alphanum\' 25 //验证邮箱/网址/英文字符/英文字符和数字; 26 }); 27 28 4.8.4 自定义校验规则 29 //允许自定义一个regex对输入数据进行校验; 30 new Ext.form.TextField({ 31 fieldLabel:\'自定义校验\', 32 regex:/^[\u4E00-\u9FA5]+$/, 33 regexText:\'只能输入汉字\' 34 }); 35 36 4.8.5 NumberField校验 37 //NumberField控件不允许用户输入不符合要求的数据; 38 items:[{ 39 fieldLabel:\'数字\', 40 xtype:\'numberfield\', //数字控件; 41 allowNegative:false, //不允许负值; 42 allowDecimals:false, //不允许小数; 43 decimalPrecision:4, //精确到小数点后几位; 44 minValue:0, 45 maxValue:150, 46 maskRe:/\d/ //阻止小数和符号的输入; 47 }] 48 49 4.8.6 使用后台返回的校验信息 50 //在服务器返回的相应中可以包含校验失败的信息; 51 items:[{ 52 fieldLabel:\'输入框1\', 53 name:\'text1\' 54 },{ 55 fieldLabel:\'输入框2\', 56 name:\'text2\' 57 }], 58 buttons:[{ 59 text:\'按钮\', 60 handler:function(){ 61 form.getForm().submit({ 62 success:function(form,action){ 63 Ext.Msg.alert(\'信息\',action.result.msg); 64 }, 65 failure:function(form,action){ 66 if(action.failureType == Ext.form.Action.SERVER_INVALID){ 67 Ext.Msg.alert(\'错误\',\'后台校验失败\'); 68 }else{ 69 Ext.Msg.alert(\'错误\',\'无法访问后台\'); 70 } 71 } 72 }); 73 } 74 }] 75 //通过actioin的failureType来判断响应失败是因为校验失败还是因为HTTP链接发生错误; 76 >.后台响应信息 77 {success:false,errors:{text1:\'有问题1\',text2:\'有问题2\'}} 78 //errors对应一个JSON对象,里边包含的就是错误信息;与输入框的text1和text2对应起来,最终显示在页面上;
1 4.9 使用表单提交数据 2 >.一种原始的HTML表单形式的提交和两种Ajax形式的提交; 3 4.9.1 Ext默认的提交形式 4 Ext.onReady(function(){ 5 var form = new Ext.form.FormPanel({ 6 defaultType:\'textfield\', 7 title:\'表单提交\', 8 ... 9 url:\'xxx.jsp\', //提交路径; 10 items:[{ 11 fieldLabel:\'文本框\', 12 name:\'text\' //后台判断来自哪个控件; 13 }], 14 buttons:[{ 15 text:\'提交\', //按钮显示文字; 16 handler:function(){ //提交按钮调用函数; 17 form.getForm.submit({ //为submit封装回调函数; 18 //只有后台响应为true,或响应的JSON中包含success:true时,执行; 19 success:function(form,action){ 20 //参数直接调用form对象; 21 //action可直接从返回信息中调用JSON数据 ↓↓ 22 Ext.Msg.alert(\'信息\',action.result.msg); 23 }, 24 failure:function(){ 25 //Ext规定:如果响应的JSON中的success不是true,并且JSON中包含errors:{},则是判断后的业务错误; 26 //如果没有包含errors:{},则是链接失败; 27 Ext.Msg.alert(\'错误\',\'操作失败!\'); 28 } 29 }) 30 } 31 }] 32 }); 33 form.render(\'form\'); 34 }); 35 36 4.9.2 使用HTML原始的提交形式 37 //Ext默认的提交形式是不会进行页面跳转的;主要是"one page one application"的形式; 38 //在Ext.form.FormPanel里找到form,在它上面调用submit()就可以了; 39 //Ext动态生成了表单,却没有把action部分添加上; 40 //所以需要修改按钮的handler函数↓↓↓ 41 handler:function(){ 42 form.getForm().getEl().dom.action = \'xxx.jsp\'; 43 //Ext中所有的控件都有el,el都是有DOM的;这个DOM模型就是Ext控件在页面上真实对应的部分了; 44 form.getForm().getEl().dom.submit(); 45 //应用了HTML原始的提交形式; 46 } 47 48 4.9.3 单纯Ajax 49 //若使用外部Ajax,需要从中把字段的数据取出来; 50 >.form.getValues():若参数是true,就返回JSON组装的字符串;若参数是false,就返回JSON对象; 51 >.findField():获取表单里的控件; 52 var text = form.getForm().findField(\'text\'); 53 //用getValues(true)函数来配合Ajax获得数据;然后用Ajax传递给后台;最后判断回调; 54 handler:function(){ 55 var text = form.getForm().findField(\'text\'); 56 57 Ext.Ajax.request({ 58 method:\'POST\', 59 url:\'xxx.jsp\', 60 success:function(response){ 61 var result = Ext.decode(response.responseText); 62 Ext.Msg.alert(\'信息\',result.msg); 63 }, 64 failure:function(){}, 65 params:form.getForm().getValues(true) 66 }) 67 } 68 69 4.9.4 文件上传 70 //为Ext.form.Field设置inputType:\'file\'即可; 71 var file = new Ext.form.FormPanel({ 72 ... 73 title:\'文件上传\', 74 fileUpload:true, 75 items:[{ 76 xtype:\'textfield\', 77 fieldLabel:\'上传\', 78 name:\'file\', 79 inputType:\'file\' 80 }] 81 }) 82 83 4.9.5 文件上传控件 84 //FileUploadField更加美化了上传选择控件; 85 var fileUpload = new Ext.form.FormPanel({ 86 .. 87 title:\'File Upload Field\', 88 fileUpload:true, 89 items:[{ 90 xtype:\'fileuploadfield\', 91 fieldLabel:\'上传控件\', 92 name:\'fielduploadfield\' 93 }] 94 });
1 4.10 自动把数据填充到表单中 2 //使用Ext.data.JsonReader来负责数据的读取和转换操作; 3 [{text:\'textField\',number:12.34,dat:\'2015-01-01\',combo:1}] 4 //↑↑这里提供了JSON数据,表单中需要配置对应的reader↓↓; 5 var reader = new Ext.data.JsonReader({},[ 6 {name:\'text\',type:\'string\'}, 7 {name:\'number\',type:\'float\'}, 8 {name:\'date\',type:\'date\',dateFormat:\'Y-m-d\'}, 9 {name:\'combo\',type:\'int\'} 10 ]); 11 //现在将设置好的reader放到表单中,后台返回的JSON会在这里被JsonReader()转换成对应的数据类型,供表单使用; 12 var form = new Ext.form.FormPanel({ 13 .. 14 reader:reader, 15 items:[{ 16 xtype:\'textfield\', 17 fieldLabel:\'文本\', 18 name:\'text\' 19 },{ 20 xtype:\'numberfield\', 21 fieldLabel:\'数字\', 22 name:\'number\' 23 },{ 24 xtype:\'datefield\', 25 fieldLabel:\'日期\', 26 name:\'date\' 27 },{ 28 xtype:\'combo\', 29 fieldLabel:\'下拉\', 30 name:\'combo\', 31 store:new Ext.data.SimpleStore({ 32 fields:[\'value\',\'text\'], 33 data:[[1,\'text1\'],[2,\'text2\'],[3,\'text3\']] 34 }), 35 triggerAction:\'all\', 36 valueField:\'value\', 37 displayField:\'text\' 38 }] 39 }) 40 //当调用form.load()函数时,表单会使用Ajax去后台读取需要的数据; 41 { 42 text:\'读取\', 43 handler:function(){ 44 form.getFomr().load({url:\'xx2.txt\'}); 45 } 46 } 47 //为load()传递一个url参数,指定读取数据的网址;这个网址返回的信息就是上面提到的用于向表单填充数据的JSON字符串;