From Learn About the Ext JavaScript Library

Excerpt from my blog:

For my example I will save the tab to display in a tab panel. Because this is a common occurrence, I have created a new class based on TabPanel:

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{tab:this.getActiveTab().id}},
 applyState: function(state) {this.setActiveTab(state.tab);}
});

To work, the system requires a state manager - a way to save the data. The system already has one that saves state in cookies. If you want to save the state to the server a new manager is needed. In my case I am quite happy to use cookies so that the state is kept on the browser for that user and machine. I did want it to live longer than the default 1 day:

Ext.state.Manager.setProvider(
 new Ext.state.CookieProvider({
  expires: new Date(new Date().getTime()+(1000*60*60*24*365)), //1 year from now
 }));

Put this code in the start of your main Ext.onReady function.

applyState() is only needed for more complex processing. If you only need to save the state of existing fields, applyState can be called implicitly. In the example, the active tab is set from the field activeTab:

Ext.ux.StatefulTabPanel = Ext.extend(Ext.TabPanel, {
 stateEvents: ['tabchange'],
 getState: function() {return{activeTab:this.getActiveTab().id}},
});