extjs网格,用于分组摘要的计算

extjs grid with calculations for the grouping summary

本文关键字:计算 网格 用于 extjs      更新时间:2023-09-26

我有一个有4列的网格,(site、nombre、vitesse和temps-cime)

我想为每个分组获取一行摘要:1.列"site"的行数2."nombre"列的总和3."vitesse"列的平均值4.柱温度的平均值cime

这是jsfiddle:

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

我试过

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

但没有任何区别,不知道问题是从哪里来的。

感谢您的帮助

不确定您对列"site"的意思。您需要添加"SummaryRow"功能才能使其中任何一个正常工作。得到了其他的总结工作(不能保存到小提琴atm这么长时间后传入):

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 

}

});

基本上,只是将该功能添加到网格中,并切换了一些汇总类型。

希望这能帮助