• 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', {
                 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带有分页,它统计的会是当前页的数据,如果你想统计的是所有记录数据,那只能通过其它方法了。

  • 相关阅读:
    Vim配置及使用技巧
    终端提示符的配置
    Archlinux下i3wm与urxvt的配置
    Linux压缩命令
    Archlinux无线联网教程
    Archlinux安装和使用技巧
    Linux下硬盘分区
    Linux挂载
    Android中pullToRefresh使用
    SVN服务器搭建和使用教程
  • 原文地址:https://www.cnblogs.com/zdkjob/p/2487662.html
Copyright © 2020-2023  润新知