EXTJS4:在grid中加入合计行

extjs4很方便的实现简单的合计(针对在不分页的情况下):

它效果实现在:Ext.grid.feature.Summary这个类中

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

Ext.create('Ext.grid.Panel', {
    width: 400,
    height: 200,
    title: 'Summary Test',
    style: 'padding: 20px',
    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'
    }]
});

 

可以参照api。exjts4API很大,每天使用,每天进步。

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.feature.Summary

 

http://www.cnblogs.com/zdkjob/archive/2012/05/07/2487662.html

posted @ 2014-06-03 11:43  全力以赴001  阅读(3350)  评论(0编辑  收藏  举报