ExtJS4.2學習(八)表格限制輸入數據的類型

如何軟件和系統都會對輸入的數據類型進行限制。Ext提供了多種數據類型的組件，好比NumberField限制只能輸入數字，ComboBox限制只能輸入備選項，DateField限制只能選擇日期，CheckBox則限制從true和false中選擇其一，等等。
效果：


選擇列：

日期列:

判斷列：

如今咱們來修改以前的數據，讓數據類型變得更豐富，以下面的代碼：

Ext.onReady(function(){ 
    var comboData=[ 
                   ['0','新版ext教程'], 
                   ['1','ext在線支持'], 
                   ['2','ext擴展'] 
                   ]; 
    var columns = [{ 
        header:'數字列', 
        dataIndex:'number', 
        editor:new Ext.form.NumberField({ 
            allowBlank: false, 
            allowNegative: false, 
            maxValue: 10 
        }) 
    },{ 
        header:'選擇列', 
        dataIndex:'combo', 
        editor:new Ext.form.ComboBox({ 
            store: new Ext.data.SimpleStore({ 
                fields:['value','text'], 
                data: comboData 
            }), 
            emptyText: '請選擇', 
            mode: 'local', 
            triggerAction: 'all', 
            valueField: 'value', 
            displayField: 'text', 
            editable: false 
        }), 
        renderer: function(value){ 
            return comboData[value][1]; 
        } 
    },{ 
        header:'日期列', 
        dataIndex:'date', 
        editor:new Ext.form.DateField({ 
            format: 'Y-m-d', 
            minValue: '2007-12-14', 
            disabledDays: [0, 6], 
            disabledDaysText: '只能選擇工做日' 
        }), 
        renderer: function(value) { 
            return Ext.Date.format(value, "Y-m-d"); 
        } 
    },{ 
        header:'判斷列', 
        dataIndex:'check', 
        editor:new Ext.form.Checkbox({ 
            allowBlank: false 
        }), 
        renderer:function(value) { 
            return value ? '是' : '否'; 
        } 
    }]; 
    // 放到grid裏顯示的原始數據 
    var data = [ 
        [1.1,1,new Date(),true], 
        [2.2,2,new Date(),false], 
        [3.3,0,new Date(),true], 
        [4.4,1,new Date(),false], 
        [5.5,2,new Date(),true] 
    ]; 
          
      
    var store = new Ext.data.ArrayStore({ 
        data: data, 
        fields: [ 
            {name: 'number'}, 
            {name: 'combo'}, 
            {name: 'date'}, 
            {name: 'check'} 
        ] 
    }); 
    store.load(); 
      
    var grid = new Ext.grid.GridPanel({ 
        autoHeight: true, 
        renderTo: 'grid', 
        store: store, 
        columns: columns, 
        selType: 'cellmodel', 
        plugins: [ 
            Ext.create('Ext.grid.plugin.CellEditing', { 
                clicksToEdit: 1 
            }) 
        ] 
    }); 
});

你們仔細研究一下渲染函數renderer。常常有人會遇到EditorGrid裏的ComboBox沒法正常顯示數據的狀況，其實，這是由於少了這個renderer函數。當沒寫這個函數時，顯示的數據是value值，而不是text。畢竟Editor裏的編輯器只在實際編輯時起做用，表格與editor質檢共享的是數據，顯示層都要依靠各自的實現。不夠這樣作更靈活，不須要二者都使用同樣的顯示方式。
連載中，請你們持續關注，本文出自個人我的網站思考者日記網