1 4.1 制作表单 2 var form = new Ext.form.FormPanel({ 3 title:'form', 4 defaultType:'textfield', 5 buttonAlign:'center', 6 frame:true, 7 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 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:{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 auto 98 },{ 99 boxLabel:'吃饱', 100 name:'check', 101 value:'2', 102 checked:true, 103 '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 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 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 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字符串;