From Learn About the Ext JavaScript Library

Ext 2.0 has some wonderful grid data grouping functionality as can be seen in the Grid3 Grouping Example. Further documentation can also be found within the API Documentation under Ext\data\GroupingStore and Ext\grid\GroupingView. However, neither source includes references to two useful configuration options available to you: groupable and groupRenderer.

Looking at the Grid3 Grouping example, let's say you want to prevent the user from grouping on the Price or Change columns as that may not make sense. To disable the group functionality for these two columns you would add the groupable property like so:

columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', groupable: false, renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

With these settings in place, the drop down menu for the Price and Change columns will have both the "Group By This Field" and the "Display in Groups¹" menu options disabled.

Now let's say you add a custom renderer for the Company column that turned the company names into web links to the respective company home web sites. This would result in some ugly group headers being generated for two reasons. One, by default, Ext constructs the group header using the defined groupTextTpl property of the GroupingView which in this example is defined as:

view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

The {text} portion of the defined XTemplate template comes directly from the column's value which in this case would be an anchor tag around the company name. The second part of the problem is that Ext utilizes some special group tracking div tags which will also be pulled in by the {text} template reference. To eliminate this problem you will need to apply a groupRenderer to the company column:

columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company', groupRenderer: function (value, o, record, rowIndex, colIndex, store){return value;}},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price', groupable: false},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', groupable: false, renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

Now, instead of using the HTML held in the column value to populate {text}, the value returned by the groupRenderer will be used. The function above simply returns the unadulterated company name. Of course you could also use the groupRenderer to do other interesting data manipulations like maybe return "Today" for a group on the Last Updated column when the date matches the current date.

1 - A patch has been checked into SVN to properly disable the "Show in Groups" menu option.

• Ext Programmer's API Documentation
• Ext User Forums