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

执行结果：