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帶有分頁，它統計的會是當前頁的數據，如果你想統計的是所有記錄數據，那只能通過其它方法了。