Last column in grid needs custom title

Question

So I am using ExtJS to render grids with data. I have features on the grid which are good but I want to last row to say "Total of All" but it's repeating the first group title.

Below is my custom group header:

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
    }],

And here is the summery type config that is producing the totals title:

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>';
                }
            }

Here is the screenshot with the highlighted title i want to make custom. I have tried a few things. Anyone know how to get a reference to this cell and change the the title?

Thank you in advance :)

Nathan

Answer 1

You may look at this inside summaryType. I have noticed that when it is invoked for total group it points to Ext.data.Store, and when it is called for 'normal' group it points to Ext.util.Group.

So example summaryType may look like this:

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>';
}

Working sample: http://jsfiddle.net/b2LS5/4/