EXTJS4自學手冊——頁面控制項（表格的特性）

一、分組展示

說明：通過聲明grid控制項的features屬性，建立Ext.grid.feature.Grouping組件，實現分組展示

例子：

首先，在定義store時，聲明需要分組的欄位：

            var store = Ext.create("Ext.data.ArrayStore", {                fields: ['id', 'name', 'age', 'address'],                //通過address欄位分組                groupField: 'address',                data: [                    [1, 'aaa', '23', '江津'],                    [2, 'bbb', '34', '北碚'],                    [3, 'ccc', '33', '江津'],                    [4, 'ddd', '54', '杭州'],                    [4, 'eee', '24', '北碚']                    ]            });

然後，在建立表格時，聲明features屬性：

 Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                forceFit: true,                renderTo: Ext.getBody(),                //聲明分組展示                features: [Ext.create('Ext.grid.feature.Grouping', {                    //組名                    groupHeaderTpl: '{name}({rows.length})'                })],                columns: [{                    text: '姓名', dataIndex: 'name'                }, {                    text: '年齡', dataIndex: 'age'                }]            });

執行結果：

二、分組展示時為特定欄位加上摘要資訊

說明：通過groupingsummary組件實現

首先，定義store，聲明分組欄位：

            var store = Ext.create("Ext.data.ArrayStore", {                fields: ['id', 'name', 'age', 'address'],                //通過address欄位分組                groupField: 'address',                data: [                    [1, 'aaa', '23', '江津'],                    [2, 'bbb', '34', '北碚'],                    [3, 'ccc', '33', '江津'],                    [4, 'ddd', '54', '杭州'],                    [4, 'eee', '24', '北碚']                    ]            });

然後，然後在聲明grid欄位的時候，聲明features特性，並在特定欄位加上摘要資訊

Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                forceFit: true,                renderTo: Ext.getBody(),                //聲明分組展示                features: {                    groupHeaderTpl: ' {name}',                    ftype: 'groupingsummary'                },                columns: [{                    text: '姓名', dataIndex: 'name',                    //統計人數                    summaryType: 'count',                    //顯示類容                    summaryRenderer: function(value){                    return Ext.String.format('{0} people{1}',                    value, value !== 1 ? 's' : '');                    }                }, {                    text: '年齡', dataIndex: 'age'                }]            });

執行結果：

三、為表格的特定列增加摘要

說明：通過summary特性實現

首先，定義store：

   var store = Ext.create("Ext.data.ArrayStore", {                fields: ['id', 'name', 'age', 'address'],                data: [                    [1, 'aaa', '23', '江津'],                    [2, 'bbb', '34', '北碚'],                    [3, 'ccc', '33', '江津'],                    [4, 'ddd', '54', '杭州'],                    [4, 'eee', '24', '北碚']                    ]            });

然後，聲明表格的features屬性

 Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                forceFit: true,                renderTo: Ext.getBody(),                //聲明分組展示                features: {                                        ftype: 'summary'                },                columns: [{                    text: '姓名', dataIndex: 'name',                    //統計人數                    summaryType: 'count',                    //顯示類容                    summaryRenderer: function(value){                    return Ext.String.format('{0} people{1}',                    value, value !== 1 ? 's' : '');                    }                }, {                    text: '年齡', dataIndex: 'age'                }]            });

執行結果：

四、為表格的每一行新增說明

說明：通過rowwrap特性實現

首先，定義store：

var store = Ext.create("Ext.data.ArrayStore", {                fields: ['id', 'name', 'age', 'address'],                data: [                    [1, 'aaa', '23', '江津'],                    [2, 'bbb', '34', '北碚'],                    [3, 'ccc', '33', '江津'],                    [4, 'ddd', '54', '杭州'],                    [4, 'eee', '24', '北碚']                    ]            });

然後，聲明表格的features特性

Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                forceFit: true,                renderTo: Ext.getBody(),                //聲明特性                features: [{                    ftype: 'rowbody',                    getAdditionalData: function (data, idx, record, orig) {                        return {                            rowBody: Ext.String.format(                '<div>->姓名:<span> {0}</span></div>',                data.name)                        };                    }                }                ],                columns: [{                    text: '姓名', dataIndex: 'name'                }, {                    text: '年齡', dataIndex: 'age'                }]            });

執行結果：