How does the ExtJS column grouping work in EditorGridPanel? - extjs

Question

How does the 'ExtJS' column grouping work in 'EditorGridPanel'? For, in this example: 'http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-header-grid.html', it seems like it's not really working, yet its working fine for me in 'simple grid panel'.
Ext.apply(this,
{
store: new Ext.data.Store(
{
reader: new Ext.data.JsonReader(
{
id: '"ID"',
totalProperty: 'totalCount',
root: 'rows',
fields: [
{ name: 'ID', type: 'string' },
{ name: 'organizationID', type: 'string' },
{ name: 'StructureID', type: 'string' },
{ name: 'Type', type: 'string' },
{ name: 'PropID', type: 'string' },
{ name: 'ProtectedSurface', type: 'string' },
{ name: 'Content', type: 'string' },
{ name: 'CPType', type: 'string' },
{ name: 'Location', type: 'string' },
]
}),
proxy: new Ext.data.HttpProxy({ url: this.url }),
baseParams: { cmd: 'getData1', objName: this.objName, aad: Ext.getCmp('clientidforStr').getValue() },
sortInfo: { field: '"ID"', direction: 'ASC' },
remoteSort: true,
mode: 'local',
autoLoad: true,
listeners: {
load: {
scope: this, fn: function (store) {
// keep modified records accros paging
var modified = store.getModifiedRecords();
for (var i = 0; i < modified.length; i++) {
var r = store.getById(modified[i].id);
if (r) {
var changes = modified[i].getChanges();
for (p in changes) {
if (changes.hasOwnProperty(p)) {
r.set(p, changes[p]);
}
}
}
}
//alert(Ext.getCmp('areaidforStr').getValue());
}
},
exception: function (proxy, type, action, options, response, arg) {
if (response.responseText != '') {
Ext.Msg.alert('From getData Command', response.responseText);
}
//this.showError(response.responseText, 'from getData Command:');
//alert(response.responseText + '\n from getData Command ');
console.log(response);
if (type === 'remote') {
// success is false
// do your error handling here
alert('error' + response);
console.log(response); // the response object sent from the server
}
}
}
}),
features: [{
groupHeaderTpl: 'Subject: {Location}',
ftype: 'groupingsummary'
}],
columns: [
{
header: 'ID',
id: 'ID',
dataIndex: 'ID',
hidden: true,
hideable: false,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false })
},
{
header: 'Structure Group',
id: 'StructureID',
dataIndex: 'StructureID', editable: false,
width: 45,
sortable: true,
editor: comboStructureAreaRelation,
renderer: Ext.util.Format.comboRenderer(comboStructureAreaRelation, AssignedGridStoreforStr)
},
{
header: 'Structure',
dataIndex: 'Type',
id: 'Type', editable: false,
width: 45,
sortable: true,
editor: StructureTypeCombo,
renderer: Ext.util.Format.comboRenderer(StructureTypeCombo, StorestrructureType)
},
{
header: 'Asset ID',
dataIndex: 'PropID', editable: false,
id: 'PropID',
width: 60,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false, cls:'textStyle' })
},
{
header: 'Protected Surface',
dataIndex: 'ProtectedSurface',
id: 'ProtectedSurface',
editable: false,
width: 45,
sortable: true,
editor: ComboTankProtectedSurface,
renderer: Ext.util.Format.comboRenderer(ComboTankProtectedSurface, storeTankProtectedSurface)
},
{
header: 'DATA EX',
id: 'ProtectedSurface11',
columns: [
{
header: 'Asset ID',
dataIndex: 'PropID', editable: false,
id: 'PropID11',
width: 60,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false, cls: 'textStyle' })
},
{
header: 'Protected Surface',
dataIndex: 'ProtectedSurface',
id: 'ProtectedSurface11',
editable: false,
width: 45,
sortable: true,
editor: ComboTankProtectedSurface,
renderer: Ext.util.Format.comboRenderer(ComboTankProtectedSurface, storeTankProtectedSurface)
},
]
},
{
header: 'Content',
dataIndex: 'Content', editable: false,
id: 'Content',
width: 60,
sortable: true,
},
{
header: 'CP Type',
dataIndex: 'CPType', editable: false,
id: 'CPType',
width: 60,
sortable: true,
},
{
header: 'Location',
dataIndex: 'Location', editable: false,
id: 'Location',
width: 60,
sortable: true,
},