Results 1 to 5 of 5

Thread: How to save grid grouping state?

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default How to save grid grouping state?

    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

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default

    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

    Code:
    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?

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default

    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:

    Code:
        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

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    2

    Default Solution for extJs 4

    Does anybody know the solution for the same issue for extJs v.4.1.
    Looks like this one doesn't work with it.

    Thanks.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •