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

执行结果：