View Full Version : Restore state of grid panel

30 Jun 2014, 6:06 AM
Using Ext JS 4.2 I am trying to make it so the state of the grid panel is saved from session to session. For example I want to be able to change the width of a column, refresh the page, and then still see the changed column width when the page reloads. Using the stateful property in the grid panel and the cookie provider I have been able to get it to save state when it is changed and I can see the changes when I reload the page. The only problem is that the state restore isn't getting called so the state is not getting restored.

My understanding is that a stateful component is supposed to restore its last state in the constructor. Is this not the case? Do I have to actually have to restore the table myself using the information in the state manager?

Gary Schlosberg
10 Jul 2014, 7:33 AM
Did you set a stateId (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.state.Stateful-cfg-stateId)?

10 Jul 2014, 8:42 AM
I'm using stateId for the grid and all the columns. The closest thread that would posted to my problem is the second one (http://www.sencha.com/forum/showthread.php?275620) but none of the solutions posted in the thread work for me.

I would like to emphasize that the issue is not in saving the state, that woks fine, but the issue lies in restoring the state when I refresh the page. In order to show that this is the case I was able to create a controller action onGridpanelBeforeStateSave which prints the state in the state manager when the beforestatesave action is triggered

onGridpanelBeforeStateSave: function(stateful, state, eOpts) {
console.log("onGridpanelBeforeStateSave: state:");

When I resize a column, then refresh the page, the page loads and outputs the state from beforestatesave with the column size that was set before I refreshed the page. Although the column size is correct in the manager, the staterestore action is never triggered so the column is reset to its default size.

To show that the staterestore is not being triggered I added a controller action onGridpanelStateRestore which is triggered on staterestore

onGridpanelStateRestore: function(stateful, state, eOpts) {

This action is never triggered when I refresh the page.

11 Jul 2014, 2:06 PM
I created a sample project in Architect that reproduces my issue:


11 Jul 2014, 2:21 PM
You create the viewport (and as such, the grid) before you create the cookie provider, so there's nothing to restore the state from.

14 Jul 2014, 6:42 AM
Thanks for the quick response.

I moved the creation of the CookieProvider to the application constructor instead of the application onLaunch and now the state is being restored as it should be.