PDA

View Full Version : Adding Ext.grid.feature.Grouping to grid breaks expand/collapse



alex9311
7 Nov 2012, 5:18 PM
Hey all,

I'm messing with the grid grouping features so I can change the groupHeaderTpls for my groups. I got the headers to look how I want but now the expanding/collapsing isn't working. Is there a workaroud for this?

Here is my Grid.js code, the commented features line is from my old version, this does allow expanding/collapsing.

Ext.define('BZ.view.blaze.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.blazegrid',
store: 'Blaze',
autoScroll: 'true',
//features:[{groupingFeature}],
features: [Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{name} ({rows.length})',
collapsible: true,
})
],
initComponent: function(){
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
{header: 'Subject', dataIndex: 'subject', width:175},
{header: 'Sender', dataIndex: 'sender', width:75},
{header: 'Attachment', dataIndex: 'attachment', width:40,
renderer: function(value){
if(value=='')
return '';
else
return '<img src="ext/resources/themes/images/default/grid/accept.png" />';
}
}
];
this.callParent(arguments);
}
});

I declare a groupField in my store file

Ext.define('BZ.store.Blaze', {
extend: 'Ext.data.Store',
model: 'BZ.model.Blaze',
data: [
//hardcoded data
],
groupField: 'course',
sortOnLoad: true,
sorters: [{
property: 'date',
direction: 'DESC'
}]
});

mitchellsimoens
9 Nov 2012, 9:32 AM
You should not do this:


features: [Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{name} ({rows.length})',
collapsible: true,
})
],

Should really be like:


features: [
{
ftype : 'grouping',
groupHeaderTpl: '{name} ({rows.length})',
collapsible: true,
}
],

alex9311
9 Nov 2012, 10:47 AM
This works perfectly, thank you!