CODEWITHSUNDEEP
gridextjs4groupingextjs4.1
talha06
talha06

Reputation: 6466

Condition inside Ext JS 4.1 GroupHeaderTpl

I need to change groupHeaderTpl upon to the groupingField value. In my case, I group through a boolean field. How can I do this?

groupHeaderTpl: '{name}=="true" ? Shared : Your own'

groupHeaderTpl: '[{name}=="true" ? Shared : Your own]'

Upvotes: 0

Views: 6452

Answers (2)

ps84
ps84

Reputation: 11

You might like to try the following:

groupHeaderTpl: '{[values.groupValue ? "Shared" : "Your own"]}'

This works for me with Ext JS 4.2 (although I haven't verified it with 4.1, the documentation also describes groupValue).

HTH

Upvotes: 1

JohnHarp
JohnHarp

Reputation: 156

If the below answer doesn't help you, here's a technique you could use to debug:

Introduce a debugging function "objectToString" in your page:

function ObjectToString(object) {
    var string;
    var name;

    for (name in object) {
        if (typeof object[name] !== 'function') {
            string += "{\"" + name + "\": \"" + object[name] + "\"}<br />";
        }
    }

    return string;
}

Then, use this function to dump out the attributes in the values.rows[0] object so you can see if the columns / values you want are available for the test:

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Debug: {[ObjectToString( values.rows[0] ) ]}',
    hideGroupedHeader: true
});

When this is used to debug the example below, you can get this debugging output:

Example of debugging output

So, from this you can see that by setting the "id" property of the column I'm grouping on, that makes the column name available in the values.rows array so I can test its value.

Again, hope this technique and the below original sample helps.

==== Original Example Below Before Debugging Code ====

Here's a sample modified slightly from the Sencha grid grouping example. (See sencha site, grid grouping example).

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Cuisine: {[ values.rows[0].cuisine == "American" ? "North American" : values.rows[0].cuisine ]}',
    hideGroupedHeader: true
});

var grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    collapsible: true,
    iconCls: 'icon-grid',
    frame: true,
    store: Restaurants,
    width: 600,
    height: 400,
    title: 'Restaurants',
    resizable: true,
    features: [groupingFeature],
    columns: [{
        text: 'Name',
        flex: 1,
        dataIndex: 'name'
    },{
        text: 'Cuisine',
        id: 'cuisine',    // NOTE: you must assign an id here
        flex: 1,
        dataIndex: 'cuisine'
    }],
    fbar  : ['->', {
        text:'Clear Grouping',
        iconCls: 'icon-clear-group',
        handler : function(){
            groupingFeature.disable();
        }
    }]
});

The things to keep in mind are:

  1. Set the "id" attribute in the column definitions or you won't be able to reference those columns in the groupHeaderTpl
  2. Use {[ ... ]} in the groupHeaderTpl to run some arbitrary javascript to perform your checks
  3. Use value.rows[0].FIELDNAME to pull out the column value you want from the first row in the group

I hope that helps you.

Upvotes: 3

Related Questions