extjs 网格与分组摘要的计算

Question

我有一个有 4 列的网格，（站点、名词、vitesse 和 temps cime）

我想为每个带有摘要的分组获取一行： 1. 列'site'的行数 2.“名词”列的总和 3. 'vitesse' 列的平均值 4. temps cime 列的平均值

这是 jsfiddle：

http://jsfiddle.net/P2e7s/14/

我试过了

summaryType: 'count',
summaryRenderer: function(value) { };

但是没有任何区别，不知道问题出在哪里。

感谢您的帮助

Answer 1

不太清楚您对“网站”栏的含义。您需要添加功能“SummaryRow”才能使它们中的任何一个工作。得到其他摘要工作（不能保存到提琴这么长时间后传入）：

Ext.application({
name: 'SC',
appFolder: 'app',
requires: ['Ext.container.Viewport'],

launch: function() {


    // #region Documents traités grid
    // Documents traités grid
    // model documents traités
    Ext.define('SC.model.DocTraites', {
        extend: 'Ext.data.Model',
        fields: [{
            name: "organisme"
        }, {
            name: "site",
        }, {
            name: "wat_nbr",
            type: "int"
        }, {
            name: "wat_vit",
            type: "float"
        }, {
            name: "ged_nbr",
            type: "int"
        }, {
            name: "ged_vit",
            dateFormat: "float"
        }, {
            name: "sic_nbr",
            type: "int"
        }, {
            name: "sic_vit",
            type: "float",
        }, {
            name: "tem_cim",
            type: "float",
        }]
    });


    // store documents traités
    Ext.define('SC.store.DocTraites', {
        extend: 'Ext.data.ArrayStore',
        model: "SC.model.DocTraites",
        data: [
            ["Centre Fend 1", "Site 1", 8545, 25, 521, 125, 2545, 12, 59.47],
            ["Centre Fend 1", "Site 2", 868, 25, 521, 125, 557, 12, 39.57],
            ["Centre Fend 2", "Site 3", 3633, 25, 521, 125, 544, 12, 29.47],
            ["Centre Fend 4", "Site 4", 545, 25, 521, 125, 5445, 12, 49.4],
            ["Centre Fend 5", "Site 5", 6445, 25, 521, 125, 7514, 12, 69.7],
            ["Centre Fend 1", "Site 6", 3633, 25, 521, 125, 544, 12, 29.47],
            ["Centre Fend 2", "Site 7", 545, 25, 521, 125, 5445, 12, 49.4],
            ["Centre Fend 5", "Site 8", 6445, 25, 521, 125, 7514, 12, 69.7],

            ],
        groupField: 'organisme'
    });

    Ext.create('SC.store.DocTraites', {
        storeId: 'DocTraites'
    });

    // view doxuments traites
    Ext.define('SC.view.grid.GroupedHeaderGrid', {
        extend: 'Ext.grid.Panel',
        xtype: 'documents-traites',
        store: 'DocTraites',
        columnLines: true,
        height: 350,
        title: 'Documents traités',
        viewConfig: {
            stripeRows: true
        },
        features: [{
            ftype: 'grouping',
            startCollapsed: true
        }, {
            ftype: 'summary'
        }],
        initComponent: function() {
            this.width = 800;
            this.columns = [{
                text: 'Site',
                width: 200,
                sortable: true,
                dataIndex: 'site',
                summaryRenderer: function(value) {
                    // DO STUFF
                },

            }, {
                text: 'App',
                columns: [{
                    text: 'Nombre',
                    width: 75,
                    sortable: true,
                    dataIndex: 'wat_nbr',
                    summaryType: 'sum'
                }, {
                    text: 'Vitesse',
                    sortable: true,
                    renderer: function(val) {
                        if (val > 10) {
                            return '<span style="color:green;">' + val + '</span>';
                        } else if (val < 0) {
                            return '<span style="color:red;">' + val + '</span>';
                        }
                        return val;
                    },
                    dataIndex: 'wat_vit',
                    summaryType: 'average'
                }]
            }, {
                text: 'Temps Cime',
                sortable: true,
                dataIndex: 'tem_cim',
                summaryType: 'average'
            }];

            this.callParent();
        }
    });

    // This is to put into the launch function ( don' t forget to put above launch: name : 'SC',

    Ext.widget({
        xtype: 'documents-traites',
        renderTo: document.body
    });

    // End Documents traités grid

    // #region Detail corbeille
    // model detail corbeille        
    Ext.define('DetailCorbeille', {
        extend: 'Ext.data.Model',
        fields: ['name', 'watt', 'ged', 'sicomor']
    });

    // Store that contains several User instances.
    var detailCorbeille = Ext.create('Ext.data.Store', {
        model: 'TempsCime',
        data: [{
            name: 'Libellé local 1',
            watt: '10',
            ged: '886',
            sicomor: '78'
        }, {
            name: 'Libellé local 2',
            watt: '542',
            ged: '676',
            sicomor: '76'
        }, {
            name: 'Libellé local 3',
            watt: '544',
            ged: '96',
            sicomor: '67'
        }, {
            name: 'Libellé local 4',
            watt: '88',
            ged: '969',
            sicomor: '786'
        }, {
            name: 'Libellé local 5',
            watt: '55',
            ged: '676',
            sicomor: '6'
        }, ]
    });

    // display the data using a Grid Panel
    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: detailCorbeille,
        width: 800,
        height: 250,
        columnLines: true,
        title: 'Detail par corbeille',
        columns: [{
            text: '',
            //width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name',
            flex: 2,
        }, {
            text: 'Stock initial',
            flex: 1,
            dataIndex: 'watt',
            hidden: false,
        }, {
            text: 'Ancienneté',
            flex: 1,
            dataIndex: 'ged',
        }, {
            text: 'Entrées',
            flex: 1,
            dataIndex: 'sicomor',
        }, {
            text: 'Sorties',
            flex: 1,
            dataIndex: 'sicomor',
        }, {
            text: 'Stock final',
            flex: 1,
            dataIndex: 'sicomor',
        }, {
            text: 'Indexeurs',
            flex: 1,
            dataIndex: 'sicomor',
        }, {
            text: 'Cadence moyenne',
            flex: 1,
            dataIndex: 'sicomor',
        }, {
            text: 'Temps restant',
            flex: 1,
            dataIndex: 'sicomor',
        }, ]
    });

    // #endregion End Cime Temps chart 



}

});

基本上，只是将功能添加到网格并切换了一些 summaytypes。

希望对你有帮助