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' //默认值 可以传入参数默认为今天
})