How to show a different field's value in an Ext grid grouping header?

Question

I have an Ext.grid.Panel that I'd like grouped by a field, but to display a different field in the grouping header. For example, if my model has status_id and status_name fields, I'd like to group by status_id, but show the status_name in the group header.

I've played around with the groupHeaderTpl option but no luck so far. How can this be done?

Answer 1

You can debug the grouperHeaderTpl values by doing

groupHeaderTpl:'{[console.log(values)]}'

That way you can observe all the posible values and select the correct path to obtain the value you are looking for. In this case what you need to do is

groupHeaderTpl: '{[values.rows[0].data.status_name]}'

Here you can find the whole example

/* Sample Data */
var data = [ 
         { "status_id": 1, "status_name": "Pending"}, 
         { "status_id": 2, "status_name": "Ready"}, 
         { "status_id": 3, "status_name": "Processing"}, 
         { "status_id": 4, "status_name": "Unavailable"},
         { "status_id": 5, "status_name": "Ready"}, 
       ];

/* Model */
Ext.define("StatusModel", {
  extend: 'Ext.data.Model',
  fields: ['status_id', 'status_name']
});

/* Store */
Ext.create('Ext.data.Store', {
storeId:'statusStore',
model: "StatusModel",
groupField: 'status_id',
data: data,
proxy: {
    type: 'memory',
    reader: {
        type: 'json'
    }
}
});

/* Grouping Feature */
var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
   groupHeaderTpl: '{[values.rows[0].data.status_name]}'
});

/* Grid Panel */
Ext.create('Ext.grid.Panel', {
title: 'Status',
store: Ext.getStore('statusStore'),
columns: [
    { text: 'Id',     dataIndex: 'status_id' },
    { text: 'Name', dataIndex: 'status_name', flex: 1}
],
features: [groupingFeature],
renderTo: Ext.getBody()
});

http://jsfiddle.net/alexrom7/shZLf/1/