Extjs4——表格控件

1.一個表格的簡單形式：

columns定義表格的結構，包括首部顯示文本（header），列對應的記錄集字段（dataIndex），列是否排序（sortable），列的渲染函數（renderer）,寬度（width），格式化信息（format）

data定義表格要顯示的數據（原始數據）

store為數據存儲對象，它負責將各種原始數據轉換成Ext.data.Record類型的對象，包括兩部分：proxy和reader。proxy指獲取數據的方式，reader指如何解析數據。（因為下例中用了Ext.data.ArrayStore，它的內部會默認通過內存加載JSON數據作為元數據）

var columns = [
        {header:'編號',dataIndex:'id',sortable:true},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [             
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
/*fields定義了如何解析數據 ,可以用mapping來指定列以與dataIndex對應

 var store = new Ext.data.ArrayStore({ data: data, fields: [ {name: 'id',mapping:1}, {name: 'name',mapping:0}, {name: 'descn',mapping:2} ]
*/

store.load();//初始化數據，刷新數據 

var grid = new Ext.grid.GridPanel({
 autoHeight: true, 
renderTo: 'grid', //注意要有ID為grid的div
store: store, 
columns: columns });

 

2.表格部分功能設置：

2.1 禁用拖放列和改變列寬的功能，顯示斑馬線，遮罩和提示功能

 

var grid = new Ext.grid.GridPanel({

       enableColumnMove：false，//表格默認是可以拖放列和該變列寬的
       enableColumnResize:false,
       autoHeight: true,
        renderTo: 'grid',
        stripeRows: true,//讓表格顯示斑馬線效果
        store: store,
       loadMask: true,//讀取數據時的遮罩和提示功能
       columns: columns });

 

2.2自主決定每列的寬度：

colunms如果不給每列設置寬度，它會有一個默認值100px。還有一個forceFit屬性，表格會根據columns中設置的width按比例分配

var columns = [
        {header:'編號',dataIndex:'id',width:35},
        {header:'名稱',dataIndex:'name',width:80},
        {header:'描述',dataIndex:'descn',width:120}
    ];

 var data = [
      ['1','name1','descn1'],
      ['2','name2','descn2'],
      ['3','name3','descn3'],
      ['4','name4','descn4'],
      ['5','name5','descn5']
  ];

var store = new Ext.data.ArrayStore({
data: data,
fields: [
   {name: 'id'},
          {name: 'name'},
          {name: 'descn'}
      ]
  });
  store.load();

  var grid = new Ext.grid.GridPanel({
      autoHeight: true,
      renderTo: 'grid',
      store: store,
      columns: columns,
    forceFit: true
  });

2.3 排序：

列排序：只需在定義列模型時增加sortable屬性即可，另外表格每列默認有升序和降序排列項

    var columns = [
        {header:'編號',dataIndex:'id',sortable:true},
        {header:'名稱',dataIndex:'name',sortable:false},
        {header:'描述',dataIndex:'descn',sortable:false}
    ];

 

支持中文排序：一般我們是使用ascii碼進行排序，而中文排序為拼音排序，這里需要重寫Ext.data.Store的createComparator()函數

Ext.data.Store.prototype.createComparator = function(sorters) {
    return function(r1, r2) {
        var s = sorters[0], f = s.property;

        var v1 = r1.data[f], v2 = r2.data[f];

        var result = 0;
        if (typeof(v1) == "string") {
            result = v1.localeCompare(v2);
            if (s.direction == 'DESC') {
                result *= -1;
            }
        } else {
            result = sorters[0].sort(r1, r2);
        }

        var length = sorters.length;

        // if we have more than one sorter, OR any additional sorter functions together
        for (var i = 1; i < length; i++) {
            s = sorters[i];
            f = s.property;
            v1 = r1.data[f];
            v2 = r2.data[f];
            if (typeof(v1) == "string") {
                result = result || v1.localeCompare(v2);
                if (s.direction == 'DESC') {
                    result *= -1;
                }
            } else {
                result = result || s.sort.call(this, r1, r2);
            }

        }
        return result;
    };
};


Ext.onReady(function(){

    var columns = [
        {header:'編號',dataIndex:'id',sortable:true,width:35},
        {header:'名稱',dataIndex:'name',sortable:true,width:80},
        {id:'descn',header:'描述',dataIndex:'descn',sortable:true,width:200}
    ];

    var data = [
        ['1','啊','descn1'],
        ['2','啵','descn2'],
        ['3','呲','descn3'],
        ['4','嘚','descn4'],
        ['5','咯','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ],
       sorters: [{property: "name", direction: "ASC"}]//通過sorters設置一個默認的排序方式
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

});

2.4顯示日期類型數據：

   var columns = [
        {header:'編號',dataIndex:'id'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'},
        {header:'日期',dataIndex:'date', renderer: Ext.util.Format.dateRenderer('Y-m-d')}
    ];

    var data = [
        ['1','name1','descn1','1970-01-15T02:58:04'],
        ['2','name2','descn2','1970-01-15T02:58:04'],
        ['3','name3','descn3','1970-01-15T02:58:04'],
        ['4','name4','descn4','1970-01-15T02:58:04'],
        ['5','name5','descn5','1970-01-15T02:58:04']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'},
            {name: 'date', type:'date',dateFormat: 'Y-m-dTH:i:s'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

 

2.5 表格渲染

例如可以為性別不同的行設置不同的顏色，也可以在單元格里添加圖片等等

    function renderSex(value) {
        if (value == 'male') {
            return "<span style='color:red;font-weight:bold;'>紅男</span><img src='user_male.png' />";
        } else {
            return "<span style='color:green;font-weight:bold;'>綠女</span><img src='user_female.png' />";
        }
    }

    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
/*value:要顯示到單元格里的值 cellmeta:單元格的相關屬性，主要有id和css record:這行的數據對象，如果需要獲取其他列的值，可以通過record.data["id"]的方式得到
 rowIndex：行號 columnIndex：當前列的列號 store：構造表格時傳遞的ds,表格里的所有數據都可以通過store獲得*/

        var str = "<input type='button' value='查看詳細信息' onclick='alert(\"" +
            "這個單元格的值是：" + value + "\\n" +
            "這個單元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
            "這個單元格對應行的record是：" + record + "，一行的數據都在里邊\\n" +
            "這是第" + rowIndex + "行\\n" +
            "這是第" + columnIndex + "列\\n" +
            "這個表格對應的Ext.data.Store在這里：" + store + "，隨便用吧。" +
            "\")'>";
        return str;
    }

    var columns = [
        {header:'編號',dataIndex:'id'},
        {header:'性別',dataIndex:'sex',renderer:renderSex},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn',renderer:renderDescn}
    ];

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields:k [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

 

2.6給表格行列設置顏色：

給行設置顏色：

 <style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
.x-grid-row .x-grid-cell {background-color:transparent;}
   </style>
        <script type="text/javascript">
            Ext.onReady(function(){

    var data = [
        ['boy', 0, '#FBF8BF'],
        ['girl', 1, '#99CC99'],
        ['man', 0, '#F5C0C0'],
        ['woman', 1, '#FFFFFF']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'sex', type: 'int'},
            {name: 'color', type: 'string'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: 'name', dataIndex: 'name'},
            {header: 'sex', dataIndex: 'sex'}
        ],
        autoHeight: true,
        renderTo: 'grid',
        forceFit : true,
        viewConfig : {
            enableRowBody : true,
            getRowClass :function(record, rowIndex, p, ds) {
                var cls = 'white-row';
                switch (record.data.color) {
                    case '#FBF8BF' :
                        cls = 'yellow-row'
                        break;
                    case '#99CC99' :
                        cls = 'green-row'
                        break;
                    case '#F5C0C0' :
                        cls = 'red-row'
                        break;
                }
                return cls;
            }
        }
    });

});
        </script>

 

給列設置顏色：

 function renderMotif(data, cell, record, rowIndex, columnIndex, store){
        var value = record.get('color')
        cell.style = "background-color:" + value;
        return data;
    }

    var columns = [
        {header: 'name', dataIndex: 'name'},
        {header: 'sex', dataIndex: 'sex'},
        {header: 'color', dataIndex: 'color', renderer: renderMotif}
    ];

    var data = [
        ['boy', 0, '#FBF8BF'],
        ['girl', 1, '#FBF8BF'],
        ['man', 0, '#FBF8BF'],
        ['woman', 1, '#FBF8BF']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'sex', type: 'int'},
            {name: 'color', type: 'string'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: columns,
        autoHeight: true,
        renderTo: 'grid',
        forceFit : true
    });

});

 

2.7 自動顯示行號：

 var columns = [
        new Ext.grid.RowNumberer(),
        {header:'編號',dataIndex:'id'},
        {header:'性別',dataIndex:'sex'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];

效果如下：

 

 2.8 顯示復選框：

SelectionModel對象即selModel，它在總體上控制用戶對表格的選擇功能。

 var sm = new Ext.selection.CheckboxModel({checkOnly: false});

  var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns,
        selModel: sm
    });

效果如下：

 

2.9 限制輸入數據的類型：

Ext提供了多種數據類型的組件，比如NumberField限制只能輸入數字，ComBox限制只能輸入備選項，DataField限制只能輸入日期，CheckBox限制從true和false二選一

    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
            })
        ]
    });