Extjs4循序渐进(三)——表单及表单控件详解一(表单布局和基础控件 Text,TextArea,Number,Checkbox,Radio,Date)
表单基础
如果说GRID是数据展示最直接的方式，那么表单就是数据采集最常用的方式。在一个项目中，从小的登录界面到大的报表填报，表单无处不在。而Ext中提供了大量的表单控件，不仅美化了html本身所提供的表单元素，也有着其不具备的强大功能。值得一说的是，在性能上Extjs还是有一定的瓶颈，请大家注意优化，切勿滥用。（因表单控件较多，分多个篇章来讲述，务必会具体到各个细节及各种应用，有不详之处请大家指出）
首先是一段简单的代码申明:
Ext.require([ 'Ext.button.*', //按钮类 'Ext.form.*', //表单类 'Ext.MessageBox.*' //提示框类 ]); //预加载所需要的模块，好处是不用等那重达1M的ext-all加载完。上一篇有朋友提出了Extjs比较重量级的缺点，这里特别给出一个优化方法，在以后的文章中也会提及各种优化方法。 Ext.QuickTips.init();//初始化信息提示功能 var MyForm = Ext.create('Ext.form.Panel', { //申明一个表单对象 title:'表单',//表单标题 height:120,//表单高度 width:200,//表单宽度 border:1, //边框 frame:true,//是否渲染表单 如果为true的话，border属性设置无效 bodyStyle: { //设置表单主体样式 //background:'#fff’, //背景颜色 padding: '5px' //内间距 }, defaults:{//统一设置表单字段默认属性 //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度 labelSeparator :'：',//分隔符 labelWidth : 50,//标签宽度 width : 150,//字段宽度 allowBlank : false,//是否允许为空 blankText : '不允许为空', //若设置不为空，为空时的提示 labelAlign : 'left',//标签对齐方式 msgTarget :'qtip' //显示一个浮动的提示信息 //msgTarget :'title' //显示一个浏览器原始的浮动提示信息 //msgTarget :'under' //在字段下方显示一个提示信息 //msgTarget :'side' //在字段的右边显示一个提示信息 //msgTarget :'none' //不显示提示信息 //msgTarget :'errorMsg' //在errorMsg元素内显示提示信息 }, items:[{ xtype : 'textfield', //输入框标签 fieldLabel : '姓名'//标签内容 },{ xtype : 'numberfield', fieldLabel : '年龄' }] }); Ext.onReady(function(){ MyForm.render(document.body); })
frame这个属性如果设置为true，表单会变成圆角，并且border默认为1，背景也默认为’#DFE9F6’；如果为false，则为传统的Ext表单样式。请大家根据自己的喜好和项目的需要来定。
另外里面有很多注释了的属性，大家可以取消注释或改变内容来体验一下Ext提供的各种方法。
表单的布局
这个几乎没什么可说的，Ext.form.Panel也继承了Ext.panel.Panel，所以布局方式也一样，下面给出一个示例，界面布局上有什么不明白的可以参考我的上一篇博文Ext的界面(容器和布局)。
var fwdz=Ext.create('Ext.form.field.Text',{ fieldLabel: '房屋地址<span class=\"colorRed\"\>*</span\>', name: 'fwdz', anchor:'100%', allowBlank:false, blankText:'房屋地址不能为空' }); var dh=Ext.create('Ext.form.field.Number',{ fieldLabel: '幢号<span class=\"colorRed\"\>*</span\>', name: 'dh', anchor:'96%', value: 1, maxValue: 9999, minValue: 1 , allowBlank:false }) var cqzh=Ext.create('Ext.form.field.Text',{ fieldLabel: '产权证号<span class=\"colorRed\"\>*</span\>', name: 'cqzh', anchor:'100%', allowBlank:false }); var states_fwjg = Ext.create('Ext.data.Store', { fields: ['key', 'name'], data : [ {key:"0", name:"钢筋混凝土"}, {key:"1", name:"砖木"}, {key:"2", name:"其它结构"} ] }); var fwjg=Ext.create('Ext.form.ComboBox', { name:'fwjg', fieldLabel: '房屋结构<span class=\"colorRed\"\>*</span\>', store: states_fwjg, queryMode: 'local', displayField: 'name', valueField: 'key', value:'0', anchor:'96%', allowBlank:false }) var gjfsj=Ext.create('Ext.form.field.Date',{ name: 'gjfsj', fieldLabel: '购建房时间<span class=\"colorRed\"\>*</span\>', anchor: '100%', format:'Y-m-d', allowBlank:false }) var container=Ext.create('Ext.container.Container', { anchor: '100%', layout:'column', items:[{ xtype: 'container', columnWidth:.5, //0.50 layout: 'anchor', items: [dh,fwjg] },{ xtype: 'container', columnWidth:.5, layout: 'anchor', items: [cqzh,gjfsj] }] }); var bz=Ext.create('Ext.form.field.TextArea',{ name:bz, grow: true, fieldLabel: '备注', anchor : '100%' }) var mainForm=Ext.create('Ext.form.Panel', { name:’biaodan’, bodyStyle: { background:'#DFE9F6', padding: '5px', border:0 }, fieldDefaults: { labelAlign: 'left', msgTarget: 'side' }, items: [fwdz,container,bz], buttons: [{ text: '保存', handler: function() { Ext.Msg.alert('保存', '表单提交'); } },{ text: '取消', handler:function(){ Ext.Msg.alert('取消', '取消按钮'); } }] }); Ext.onReady(function(){ mainForm.render(document.body); })
FormPanel和BasicForm
从上图我们可以看到Ext.form.Panel是Ext.Panel的一个子类，所以可以对其进行各种panel的操作。当实际上，表单的功能是在Ext.form.Basic这个类中实现的，所以在获得Ext.form.Panel之后，我们需要使用getForm()方法来获得所取到的表单的BasicForm对象，才可以对表单进行各种操作。如上面的例子中，可以用
mainForm. getForm().getValues()
来获取所有表单元素的值。
一些常用的表单控件及常用的属性
我直接给出示例，具体的属性说明注释在代码中，大家可以直接复制过去边看边做。以下给出常用的几个，较复杂的将在下一篇详细讲解。一些通用的属性比如验证，我只在1个例子中给出。
Text文本域及验证方法
Ext.onReady(function(){ Ext.QuickTips.init(); var loginForm =Ext.create('Ext.form.Panel', { title:'Ext.form.field.Text示例', bodyStyle:'padding:5 5 5 5',//表单边距 frame : true, height:150, width:300, renderTo:Ext.getBody(), items:[{ fieldLabel : '用户名', name : 'userName', xtype:'textfield', selectOnFocus : true,//得到焦点时自动选择文本 //验证电子邮件格式的正则表达式 regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, regexText:'格式错误'//验证错误之后的提示信息, },{ name : 'password', xtype:'textfield', fieldLabel : '密码', inputType : 'password'//设置输入类型为password },{ name : 'name', xtype:'textfield', fieldLabel : '姓名', allowBlank:false,//是否允许为空，false为不允许 blankText:'姓名不能为空' //当为空时的提示 } ], buttons:[{ text : '登陆', handler : function(){ loginForm.form.setValues({userName:'user@com.cn',password:'123456',name:'aaa'}); } }] }); });
TextArea多行文本输入控件
var textarea=Ext.create('Ext.form. field. Textarea, { grow : true,//自适应文本内容 name : 'message', fieldLabel: '备注', labelWidth : 60 //标签宽度 })
Number数字输入框
var number'=Ext.create('Ext.form.field.Number',{ fieldLabel: '数字输入框<span class=\"colorRed\"\>*</span\>', name: 'number', value: 1, //初始默认值 maxValue: 9999, //最大值 minValue: 1 , //最小值 //allowDecimals : false,//不允许输入小数 //nanText :'请输入有效的整数'//无效数字提示 //baseChars :'12345'//输入数字范围 allowBlank:false //不允许为空 })
Checkboxgroup和Radiogroup
Ext.onReady(function(){ Ext.create('Ext.form.Panel',{ title:'Ext.form.field.Checkbox和Ext.form.field.Radio示例', bodyStyle:'padding:5 5 5 5',//表单边距 frame : true, renderTo :Ext.getBody(), defaults:{//统一设置表单字段默认属性 labelWidth : 80,//标签宽度 width : 200,//字段宽度 labelAlign : 'left'//标签对齐方式 }, items:[{ xtype : 'radio', name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '男' },{ xtype : 'radio', name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '女' },{ xtype : 'checkboxfield', name : 'swim', fieldLabel:'爱好', boxLabel : '游泳' },{ xtype : 'checkboxfield', name : 'walk', fieldLabel:'爱好', boxLabel : '散步' }] }); });
Checkbox和Radio的分组、排版，在官方的example有一个相当详细的demo,具体的路径在example/form/check-radio.html，如图：
Date日期选择框
var date=Ext.create('Ext.form.field.Date',{ name: date, fieldLabel:'日期选择框', //xtype : 'datefield', // Date'的xtype format:'Y年m月d日',//显示日期的格式 maxValue :'12/31/2008',//允许选择的最大日期 minValue :'01/01/2008',//允许选择的最小日期 disabledDates : ['2008年03月12日'],//禁止选择2008年03月12日 disabledDatesText :'禁止选择该日期', disabledDays : [0,6],//禁止选择星期日和星期六 disabledDaysText : '禁止选择该日期', value : '12/31/2008' //默认值 可以传入参数默认为今天 })
到此为止
各个控件写的很详细，可能初看起来会觉得我写的很啰嗦，但在我的实际的开发中，这些属性都会经常被用到，是很实用的功能，建议有需要的朋友可以先收藏，到用的时候就不会辛辛苦苦的去翻API。下一篇会继续介绍一些其他的表单控件。
