PDA

View Full Version : How to save grid grouping state?



markalroberts
16 Sep 2009, 8:29 AM
The statemanager is doing a great job at saving my grid's visible columns, sort order width etc. however, it doesn't save the column that I'm grouping by (i.e. I'm using the GroupingStore for this).

There's not a whole lot of documentation on how to customize and extend the the state storage mechanism - probably the most useful stuff I've seen are at Saki's sample site (specifically the Ext.ux.state.TabPanel plugin)

However, even if I wanted to use this as a model for a plugin for my grid, I still need an event to hook to save/restore the current group column, and there doesn't appear to be one (in the Grid api docs at least).

Can anyone point me in the right direction here?

Thanks :)

markalroberts
18 Sep 2009, 9:55 AM
Well, I have come up with a working example of what I'm trying to achieve. Feel free to pull it apart and tell me i'm doing it all wrong ;)



GroupingGridPanel = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
Ext.apply(this, {
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchanged']
});
GroupingGridPanel.superclass.initComponent.apply(this, arguments);
this.getView().on('beforerefresh', this.checkGrouping);
this.addEvents('groupchanged');
},
checkGrouping: function() {
if (this.grid.store.groupField != this.grid.oldGroupField) {
this.grid.fireEvent('groupchanged', this.grid, this.grid.oldGroupField, this.grid.store.groupField);
this.grid.oldGroupField = this.grid.store.groupField;
}
},
getState: function() {
var state = Ext.grid.GridPanel.prototype.getState.call(this);
Ext.apply(state, { groupField: this.store.groupField });
return state;
},
applyState: function(state) {
Ext.grid.GridPanel.prototype.applyState.call(this, state);
this.store.groupField = state.groupField || this.store.groupField;
this.oldGroupField = this.store.groupField;
}
});
Ext.reg('groupinggridpanel', GroupingGridPanel);
As you can see, the nearest I could find to a "GroupingChanged" event was the refresh on the grouping view... then, I fire a custom event if the groupField on the store had changed.

Better solutions?

Animal
18 Sep 2009, 10:05 AM
No, that lookd OK. If it does what you need, then that's good.

A couple of small points. stateEvents will probably be already set because GridPanel already saves state on columnmove, columnresize etc.

You just want to add the events sortchanged and groupchanged to the statevents object, not completely SET the stateevents object.

'part from that, looks great.

markalroberts
23 Sep 2009, 6:44 AM
For some reason, whilst the groupField does make the grid group by that field, it doesn't get sent as one of the parameters for the first load() against the groupingStore...

The workaround for me is to set it as a baseParam like so:



applyState: function(state) {
Ext.grid.GridPanel.prototype.applyState.call(this, state);
this.store.groupField = state.groupField || this.store.groupField;
this.store.setBaseParam('groupBy', this.store.groupField);
this.oldGroupField = this.store.groupField;
}


Seems odd, but works :)

Igor G
21 Nov 2011, 1:46 PM
Does anybody know the solution for the same issue for extJs v.4.1.
Looks like this one doesn't work with it.

Thanks.