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‘);
20
21 4.2 FormPanel和BasicForm详解
22 FormPanel是Ext.Panel的一个子类;实际上,表单的功能是在Ext.form.BasicForm中实现的;在获得Ext.form.FormPanel之后,随时都可以用getForm()方法获得BasicForm对象;可以在获得的BasicForm上执行"提交"和"重置"等操作;
23 可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一个部分,同时用items指定Ext.form.FormPanel内部的子组件;可以通过xtype来指定每个子组件的类型;
24
25 4.3 Ext支持的输入组件
26 4.3.1 控件继承图
27 >.Ext.from.Field
28 >1.Ext.form.Checkbox //复选框
29 Ext.form.Radio //单选框
30 >2.Ext.form.Hidden //隐藏域
31 >3.Ext.form.TextField //文本输入
32 >1.Ext.form.NumberField //数字输入控件
33 >2.Ext.form.TextArea //多行文本输入
34 >3.Ext.form.TriggerField //选择控件
35 >1.Ext.form.ComboBox //下拉控件
36 Ext.form.TimeField //时间选取控件
37 >2.Ext.form.DateField //日期控件
38 >4.Ext.HtmlEditor //编辑器控件
39
40 4.3.2 表单控件
41 Ext.onReady(function(){
42 Ext.QuickTips.init();
43 //HtmlEditor需要
44
45 var form = new Ext.form.FormPanel({ //实例化对象
46 buttonAlign:‘center‘, //按钮居中;
47 width:600,
48 title:‘form‘,
49 frame:true, //为组件提供圆角边框;
50 fieldDefaults:{ //对象内部的属性都会被应用到下面的实例中(注意优先级问题);
51 labelAlign:‘right‘, //右浮动;
52 labelWidth:70 //宽度;
53 },
54 items:[{ //单个组件或者是组件集合;
55 xtype:‘container‘,
56 layout:‘column‘, //布局为列;
57 items:[{
58 columnWidth:.7,
59 xtype:‘fieldset‘,
60 checkboxToggle:true, //控件组 组头;用复选框来设置控件的展开和收缩;
61 title:‘单纯输入‘, //fieldset的legend;
62 autoHeight:true,
63 defaults:{width:300}, //应用所有的子组件的宽度;
64 defaultType:‘textfield‘,
65 items:[{ //单个组件
66 fieldLabel:‘文本‘, //域标签;文本域;
67 name:‘text‘
68 },{
69 xtype:‘numberfield‘,
70 fieldLabel:‘数字‘,
71 name:‘number‘
72 },{
73 xtype:‘combo‘,
74 fieldLabel:‘选择‘,
75 name:‘combo‘,
76 store:new Ext.data.SimpleStore({
77 fields:[‘value‘,‘text‘], //将模型的字段绑定到轴;
78 data:[
79 [‘value1‘,‘text1‘],
80 [‘value2‘,‘text2‘]
81 ]
82 }),
83 displayField:‘text‘, //
84 valueField:‘value‘, //相关的数据值绑定到ComboBox;
85 mode:‘local‘, //?
86 emptyText:‘请选择‘
87 },{
88 xtype:‘datefield‘, //带有日期选择器下拉框并会自动进行日期验证的日期输入表单项;
89 feildLabel:‘日期‘,
90 name:‘date‘
91 },{
92 xtype:‘timefield‘, //带有时间下拉框和自动时间验证的input表单项;
93 fieldLabel:‘时间‘,
94 name:‘tiem‘
95 },{
96 xtype:‘textarea‘,
97 fieldLabel:‘多行‘,
98 name:‘textarea‘
99 },{
100 xtype:‘hidden‘,
101 name:‘hidden‘
102 }]
103 },{
104 xtype:‘container‘,
105 columnWidth:.3,
106 layout:‘form‘,
107 items:[{
108 xtype:‘fieldset‘,
109 checkboxToggle:true,
110 title:‘多选‘,
111 autoHeight:true,
112 defaultType:‘checkbox‘,
113 hideLabels:true,
114 style:‘margin-left:10px;‘,
115 bodyStyle:‘margin-left:20px;‘,
116 itmes:[{
117 boxLabel:‘穿暖‘,
118 name:‘check‘,
119 value:‘1‘,
120 checked:true,
121 width:auto
122 },{
123 boxLabel:‘吃饱‘,
124 name:‘check‘,
125 value:‘2‘,
126 checked:true,
127 width:‘auto‘
128 }]
129 },{
130 xtype:‘fieldset‘,
131 checkboxToggle:true,
132 title:‘单选‘,
133 autoHeight:true,
134 defaultType:‘radio‘,
135 hideLabels:true,
136 style:‘margin-left:10px;‘,
137 bodyStyle:‘margin-left:20px;‘,
138 items:[{
139 boxLabel:‘自由‘,
140 name:‘rad‘,
141 value:‘1‘,
142 checked:true
143 },{
144 boxLabel:‘爱情‘,
145 name:‘rad‘,
146 value:‘2‘
147 }]
148 }]
149 }]
150 },{
151 xtype:‘container‘,
152 layout:‘form‘,
153 items:[{
154 labelAlign:‘top‘,
155 xtype:‘htmleditor‘,
156 fieldLabel:‘在线编辑器‘,
157 id:‘editor‘,
158 anchor:‘98%‘,
159 height:200
160 }]
161 }],
162 buttons:[{
163 text:‘保存‘
164 },{
165 text:‘读取‘
166 },{
167 text:‘取消‘
168 }]
169 });
170
171 form.render(‘form‘);
172 })
173
174 4.3.3 基本输入控件Ext.form.Field
175 Ext.form.Field是所有输入控件的基类;它定义了输入控件通用的属性和功能函数;
176 >1.页面显示样式:clearCls/cls/fieldClass,它们分别用来定义不同状态下输入框采用的样式;
177 >2.控件参数配置:autoCreate/disabled,它们主要用来设置输入控件生成的DOM内容和标签内容;
178 >3.数据有效性校验:invalidText/msgFx,它们用来设置数据校验的方式以及如何显示错误信息;
179 //这些控件默认会监听blur事件,如果校验失败,就会根据msgTarget中的设置显示错误信息;通常会被设置qtip,用QuickTip显示错误信息;其他参数值:title/side/under;
180 var field1 = new Ext.form.Field({
181 fieldLabel:‘qtip‘,
182 msgTarget:‘qtip‘
183 });
184 field1.markInvalid();
185 //markInvalid()函数用来显示field校验出错样式;
186
187 4.3.4 文本输入控件TextField
188 //专门用来输入文本数据的输入控件;
189 var text = new Ext.form.TextField({
190 fieldLabel:‘单行‘, //<label>标签内容;
191 allowBlank:false, //非空检测;
192 emptyText:‘空‘, //输入框默认显示信息;
193 maxLength:50, //最大值;
194 minLength:10 //最小值;
195 });
196
197 //表单控件最后都是放入表单中,然后渲染到div标签中;
198 var from = new Ext.form.FormPanel({
199 title:‘form‘,
200 frame:true,
201 items:[text],
202 renderTo:‘form‘
203 });
204
205 4.3.5 多行文本输入控件TextArea
206 var area = new Ext.form.TextArea({
207 width:200, //宽度;
208 grow:true, //根据输入内容修改自身高度;
209 preventScrollbars:true, //禁止滚动条,内容超出范围,自动隐藏;
210 fieldLabel:‘多行‘,
211 ...
212 })
213
214 4.3.6 日期输入控件DateField
215 var date = new Ext.form.DateField({
216 fieldLabel:‘日期‘,
217 emptyText:‘请选择‘,
218 format:‘Y-m-d‘, //如何保存并显示选中的日期;
219 disabledDays:[0,6] //禁止选择一周内的第一天和第七天;
220 })
221
222 4.3.7 时间输入控件TimeField
223 var time = new Ext.form.TimeField({
224 fieldLabel:‘时间‘,
225 empty:‘请选择‘,
226 minValue:‘10:00 AM‘, //设置起始时间;
227 maxValue:‘14:00 PM‘,
228 increment:30 //设置时间间隔;
229 });
230
231 4.3.8 在线编辑器HtmlEditor
232 var html = new Ext.form.HtmlEditor({
233 fieldLabel:‘在线编辑器‘,
234 enableAlignments:true,
235 enableColors:true,
236 ...
237 })
238 //应用对应的enable选项启用或禁用对应的功能按钮;
239
240 4.3.9 隐藏域Hidden
241 var hidden = new Ext.form.Hidden({
242 name:‘hidden‘
243 });
244 hidden.setValue(‘some thing‘); //对隐藏域赋值;
245 var value = hidden.getValue(); //取值;
246
247 4.3.10 如何使用input type="image"
248 //Ext没有提供对应的控件,我们可以根据需要使用inputType对Ext.form.TextField进行修改;
249 var image = new Ext.form.TextField({
250 fieldLabel:‘证件照片‘,
251 name:‘smallimg‘,
252 inputType:‘image‘,
253 inputAttrTpl:[‘src="../img/img1.png"‘],
254 width:140,
255 height:120
256 });
257 //autoCreate使用的是DomHelper的语法,生成一个带有src的DOM;
258
259 4.4 ComboBox详解
260 //Ext中提供的ComboBox与HTML中原生的select无任何关系,它是用div重写的;
261
262 4.4.1 ComboBox简介
263 var data = [ //二维数组,ComboBox将要显示的数据;
264 [‘value1‘,‘text1‘],
265 [‘value2‘,‘text2‘]
266 ];
267
268 var store = new Ext.data.ArrayStore({ //将二维数组转成对象;
269 fields:[‘value‘,‘text‘],
270 data:data
271 });
272 store.load();
273
274 var combo = new Ext.form.ComboBox({
275 store:stroe, //传入数据;
276 empty:‘请选择‘,
277 mode:‘local‘, //设置:数据已经读取到本地了;
278 valueField:‘value‘, //读取store里的value(对应的在data里的value);
279 dispalyField:‘text‘, //读取store里的text(实际是data里的text);
280 triggerAction:‘query‘, //自动补全;
281 value:‘value1‘, //设置combo的value值;
282 renderTo:‘combo‘ //渲染到的必须是<imput id="combo" type="text" />
283 })
284
285 4.4.2 将Select转换成ComboBox
286 <select id="combo">
287 <option value=‘value1‘>text1</option>
288 ...
289 </select>
290
291 var combo = new Ext.form.ComboBox({
292 emptyText:‘请选择‘,
293 mode:‘local‘,
294 triggerAction:‘all‘,
295 transform:‘combo‘ //把id="combo"的select的数据抽离出来;添加到ComboBox里;
296 });
297
298 4.4.3 ComboBox结构详解
299 var combo = new Ext.form.ComboBox({
300 ...
301 hiddenName:‘comboId‘ //让ComboBox又增加了一个type="hidden"的input,并且它的name和id都是"comboId"
302 });
303 //若没有设置hiddenName,ComboBox提交的都是用户看到的text值;设置之后,才可以向后台提交text对应的value值;
304
305 4.4.4 ComboBox读取远程数据
306 var store = new Ext.data.Store({
307 proxy:{
308 type:‘ajax‘,
309 url:‘xxx.txt‘,
310 reader:{
311 type:‘array‘
312 },
313 fields:[
314 {name:‘value‘},{name:‘text‘}
315 ]
316 }
317 });
318
319 var combo = new Ext.form.ComboBox({
320 ..
321 mode:‘remote‘, //读取远程数据;
322 });
323
324 4.4.5 ComboBox高级设置
325 >1.添加分页功能
326 var combo = new Ext.form.ComboBox({
327 ..
328 mode:‘remote‘, //参数必须是remote;因为分页的前提是先到store中分批获取数据;
329 minListWidth:200, //下拉列表的宽度;
330 pageSize:5 //每次显示多少条记录;
331 });
332
333 >2.是否允许用户自己填写内容
334 //ComboBox的显示框是一个type="text"输入框,所以默认可以输入数据的;
335 var combo = new Ext.form.ComboBox({
336 ...
337 editable:false //禁止用户填写数据;
338 });
339
340 4.4.6 监听用户选择的数据
341 //设置事件机制监听ComboBox的事件,从而获知用户选择了哪条数据;
342 combo.on(‘select‘,function(comboBox){
343 alert(comboBox.getValue()+‘-‘+comboBox.getRawValue());
344 //getValue():返回对象的value值(value);
345 //getRawValue():返回表单项的原始值(text);
346 });
347 //on():要监听绑定的combo对象;
348 //select:要监听的事件;\
349 //comboBox:是被监听的combo对象本身;
350
351 4.4.7 使用本地数据实现省/市/县级联
352 comboProvince.on(‘select‘,function(comboBox){
353 var province = comboBox.getValue();
354 if(province == ‘河北‘){
355 storeCity.proxy.data = dataCityHebei; //动态设置市;
356 }else if (province == ‘内蒙古‘){
357 storeCity.proxy.data = dataCityNeimenggu;
358 }
359 });
360 comboCity.on(‘select‘,function(comboBox){
361 var city = comboBox.getValue(); //动态设置区;
362 if(city == "唐山"){
363 storeCounty.proxy.data = dataCountyTangshan;
364 }else{
365 storeCounty.proxy.data = dataCountyUnknow;
366 }
367 });
368 comboCounty.on(‘select‘,function(comboBox){
369 alert(comboProvince.getValue()+‘-‘+comboCity.getValue()+‘-‘+comboCounty.getValue());
370 });
371
372 4.5 复选框和单选框
373 4.5.1 复选框
374 var form = new Ext.form.FormPanel({
375 title:‘form‘,
376 buttonAlign:‘center‘,
377 frame:true, //提供圆角;
378 url:‘xxx.jsp‘,
379
380 //Ext.form.Checkbox
381 items:[{
382 xtype:‘fieldset‘, //控件组,包装一组输入域的容器;渲染为HTML的fieldset;
383 title:‘多选‘, //渲染为fieldset的legend;
384 autoHeigth:true,
385 defaultType:‘checkbox‘,
386 hideLabels:true,
387 items:[
388 {boxLabel:‘多选一‘,inputValue:‘1‘,checked:true},
389 {boxLabel:‘多选二‘,inputValue:‘2‘},
390 {boxLabel:‘多选三‘,inputValue:‘3‘},
391 ]
392 }],
393
394 buttons:[{
395 text:‘提交‘,
396 handler:function(){
397 form.getForm.submit();
398 }
399 }]
400 });
401 form.render(‘form‘);
时间： 2024-10-13 07:25:06