EXTJS4:在grid中加入合计行

还记得在4.0.7之前的版本中，要在gridpanel中加一个合计栏是多么麻烦啊，4.0出现后，一句话就搞定

 

直接copy官方的

 

Ext.onReady(function () {
        Ext.define('TestResult', {
            extend: 'Ext.data.Model',
            fields: ['student', {
                name: 'mark',
                type: 'int'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            width: 200,
            height: 140,
            renderTo: document.body,
            features: [{
                ftype: 'summary'
            }],
            store: {
                model: 'TestResult',
                data: [{
                    student: 'Student 1',
                    mark: 84
                }, {
                    student: 'Student 2',
                    mark: 72
                }, {
                    student: 'Student 3',
                    mark: 96
                }, {
                    student: 'Student 4',
                    mark: 68
                }]
            },
            columns: [{
                dataIndex: 'student',
                text: 'Name',
                summaryType: 'count',
                summaryRenderer: function (value, summaryData, dataIndex) {
                    return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                }
            }, {
                dataIndex: 'mark',
                text: 'Mark',
                summaryType: 'average'
            }]
        });
    });

summaryType（统计类型)共有五种 count\sum\min\max\average

如果亲希望改变这一行的样式：

 .x-grid-row-summary .x-grid-cell-inner {
            font-weight      : bold;
            font-size        : 14px;
            background-color : #ffd800;
}

简化了不少工作，但是有一点小遗憾，观察Ext.grid.feature.Summary这个类我们会发现，这个统计是在store下去找数据，当store带有分页，它统计的会是当前页的数据，如果你想统计的是所有记录数据，那只能通过其它方法了。