javascript - 网格中的最后一列需要自定义标题

Question

所以我使用 ExtJS 来渲染带有数据的网格。我在网格上有很好的功能，但我想在最后一行说“全部总计”，但它重复了第一个组标题。

下面是我的自定义组标题:

features: [{
        ftype: 'summary'
    }, {
        //ftype: 'grouping'
        ftype: 'groupingsummary',
        groupHeaderTpl: Ext.create('Ext.XTemplate',
            '',
            '{name:this.formatName} ({rows.length})',
            {
                formatName: function(name) {
                    return name.charAt(0).toUpperCase() + name.slice(1);
                }
            }
        ),
        //groupHeaderTpl: '{name} ({rows.length})',
        hideGroupedHeader: true
    }],

这是生成总计标题的汇总类型配置:

columns: [{
                id       :'service-product',
                text   : 'Product',
                flex: 1,
                sortable : true,
                dataIndex: 'PACKAGE',
                summaryType: function(records) {
                    var myGroupName = records[0].get('LISTING');
                    return '<span style="font-weight: bold;">'+myGroupName.charAt(0).toUpperCase() + myGroupName.slice(1)+' Totals</span>';
                }
            }

这是我想要自定义的突出显示标题的屏幕截图。我尝试了一些东西。有人知道如何获取对此单元格的引用并更改标题吗？

提前谢谢你:)

内森

Answer 1

您可以在summaryType 中查看this。我注意到，当它为总组调用时，它指向 Ext.data.Store，而当它为“普通”组调用时，它指向 Ext.util.Group.

所以示例 summaryType 可能如下所示:

summaryType: function(records) {
    console.log(this.$className);
    if (this.isStore) {
        return "Total of all";
    }
    var myGroupName = records[0].get('group');
    return '<span style="font-weight: bold;">' + myGroupName + ' Totals</span>';
}

工作样本:http://jsfiddle.net/b2LS5/4/