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:7011 },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:true119 },{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:200136 }]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.Field151 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 文本输入控件TextField164 //专门用来输入文本数据的输入控件;165 var text = new Ext.form.TextField({166 fieldLabel:'单行', //
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' //渲染到的必须是 25 }) 26 27 4.4.2 将Select转换成ComboBox 28 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.Checkbox10 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 在布局中使用fielset32 //在标准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:' '}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:1017 });18 19 4.8.3 借助vtype20 //为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 单纯Ajax49 //若使用外部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字符串;
'}55 ]56 }