Extjs4之 grid中加入合计行（summary ）

最新推荐文章于 2021-04-02 10:35:16 发布

置顶无奈的伤城

最新推荐文章于 2021-04-02 10:35:16 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： EXTJS 文章标签： extjs extjs4

本文链接：https://blog.youkuaiyun.com/lianghl8090/article/details/46738755

EXTJS 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在ExtJS4的Grid中添加合计行，通过summaryType功能实现统计，包括count、sum、min、max和average五种统计类型。同时，还提及了如何自定义这一行的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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;
}