The way I see it Website development (PHP, JS, MySQL) by Damian Sromek

20Dec/100

[How to] ExtJS stateful components – Ext.Panel collapsed/expanded state stored in cookies

ExtJS allows saving the state of any component that extends Ext.Component. That means that I can store/save, for example in Cookies, state of almost any GUI component made with ExtJS.

To store the state of the component so it will look the same after page reload or after going back to the same page I need to do few simple things.

// 1. Activate a State Manager using State Provider.
// The simplest is the Cookie Provider implemented by ExtJS developers
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// 2. Create an Component and mark it as stateful
// eg. GridPanel can save columns order etc.
var grid = new Ext.grid.GridPanel({
   ...
   stateful: true,
   stateId: 'my_grid_id_for_state_manager',
   ...
});

Now let's try to make a stateful Ext.Panel.