深入浅出ExtJS 第四章 表单与输入控件(未完)
浏览数：42 /
时间：2015年06月09日
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‘);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
