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

  • 相关阅读:
    尚未为数据源“RptDataSet_StatEC”提供数据源实例
    C3P0的详细配置说明(com.mchange.v2.c3p0.comboPooledDataSource)
    TopCoder SRM 581
    [ZJOI2012]灾难
    Codeforces 313
    [ZJOI2010]数字计数
    [ZJOI2010]排列计数
    [ZJOI2009]函数
    [ZJOI2009]假期的宿舍
    [ZJOI2008]骑士
  • 原文地址:https://www.cnblogs.com/zdkjob/p/2487662.html
Copyright © 2011-2022 走看看