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:'[e-mail]',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。下一篇會繼續介紹一些其他的表單控件。