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.

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.

• javascript
• events
• datagrid
• extjs
• grid

• This worked with a GridPanel, but an EditorGridPanel is having trouble. Any suggestions for a stateful EditorGridPanel? – Christos Hayward Commented Apr 19, 2011 at 13:18
• Never mind the last question; I needed to set stateId and then everything was happy. – Christos Hayward Commented Apr 19, 2011 at 13:47

3 Answers 3

First, you need to configure a state provider.
CookieProvider is the only one that es 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 ponent to save its state"

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

Fifth, if you want to save states of multiple ponents 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.

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

Configure the grid with stateful: true and set its stateId (optional if your grid has an ID that won't change). Also initialize the Ext.state.Manager:

var thirtyDays = new Date(new Date().getTime()+(1000*60*60*24*30));
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: thirtyDays}));

Though not included in Ext 3, you can find online a state provider that uses HTML5's localStorage rather than cookies.