深入浅出ExtJS 第四章 表单与输入控件

  

 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字符串;

 

你可能感兴趣的:(ExtJs)