ExtJS4 grid grouping header renderer - How to specify?

Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the follo开发者_如何学运维wing working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:

    function fmt_group_heading(groupVal) {
    if (groupVal === 'Y') {
        return 'Past';
    } else {
        return 'Upcoming';
    }
}

    // create the Grid
    var fitGrid = new Ext.grid.GridPanel({
       store: fitGroupingStore,
       columns: [
        {header: "ID", dataIndex: 'id', hidden: true },
                {header: 'Event', width:320, dataIndex: 'event',            
                            renderer:fmt_event_description},
                {header: 'Events',  dataIndex: 'completed',  hidden: true, 
                            renderer: fmt_group_heading }
    ],
    stripeRows: true,
    // config options for stateful behavior
    stateful: true,
    stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
    groupRenderer: 'completed',
    forceFit: true
})      
});

ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.

    this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
        groupHeaderTpl: 'Group: {completed}'
    });

    // create the Grid
    this.fitnessGrid = new Ext.grid.Panel({
        store: this.fitnessEventStore,
        features: [this.groupingFeature],
            // etc.......

try smth like this:

groupHeaderTpl: '{[fmt_group_heading(values.name)]} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'

The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.

See the Docs.

Try this:

 groupHeaderTpl: '{[values.rows[0].completed]}'