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