How can I persist ExtJS datagrid column hiding/showing/moving/resizing?

Question

I would like to make a user's changes to an ExtJS datagrid's column display (hiding, showing, moving, resizing) persistent and stored on the server. There are a lot of events to listen to, but registering handlers on the grid itself doesn't seem to result in alerts being called:

    grid.on('hide', function(event)
        {
        alert('Save column order: column hidden.');
        });
    grid.on('move', function(event)
        {
        alert('Save column order: column moved.');
        });
    grid.on('resize', function(event)
        {
        alert('Save column sizes: column resized.');
        });
    grid.on('show', function(event)
        {
        alert('Save colum order: column shown.');
        });

(My basic approach may or may not be optimal.)

What concretely should I do to be listening in on these events? I can hide, show, move, and resize columns without triggering an alert.

Solution 1

First, you need to configure a state provider.
CookieProvider is the only one that comes built in with ExtJS

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

Second, mark yourGridPanel.stateful as true

Third, look at whether you need to change the default for GridPanel.stateEvents
This is basically "An array of events that, when fired, should trigger this component to save its state"

Fourth, HttpStateProvider does not come built in with ExtJS but Saki has a ux (user extension) for it.

Fifth, if you want to save states of multiple components they should have either id or stateId explicitly set.

A good approach would be to get this working as expected with the built in CookieProvider and then switch over to Http Provider.

Solution 2

The grid should have a property called "stateful". Set this to True and the grid should remember the column widths, etc.

Comments

[Christos Hayward]

This worked with a GridPanel, but an EditorGridPanel is having trouble. Any suggestions for a stateful EditorGridPanel?

[Christos Hayward]

Never mind the last question; I needed to set stateId and then everything was happy.

[Christos Hayward]

That is a 2.x extension and when I tried to run it from 3.x, I got "undefined is not a function" trying to instantiate Ext.ux.HttpProvider(). Any advice on getting a 3.0 port?

[Shekhar]

IS it possible to store state of all the rows of grid?

[Amol Katdare]

@Shekhar - The grid state is concerned with the grid configuration. Not with the store data that you see in the rows. you will need to handle saving of rows at the backend and retrieve them using parameters to your server call from the store.