CODEWITHSUNDEEP
gridgroupingextjs4
BuzzWasHere
BuzzWasHere

Reputation: 41

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 following 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.......

Upvotes: 2

Views: 8711

Answers (3)

BlackLine
BlackLine

Reputation: 363

Try this:

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

Upvotes: 0

JNicholas
JNicholas

Reputation: 51

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

See the Docs.

Upvotes: 1

Rost
Rost

Reputation: 51

try smth like this:

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

Upvotes: 1

Related Questions