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.

Answer 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.

Answer 2

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