Extjs4之 grid中加入合计行(summary )




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



Extjs4之 grid中加入合计行(summary )_第1张图片


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

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

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






你可能感兴趣的:(EXTJS)