ExtJS and Saving State

I wrote an Ajax/Web 2.0 framework before those names were bandied about. Unfortunately (for me) others have forged ahead. So, for the new project I decided to consider an existing system. After research and consideration I chose Ext-JS for my Web-2.0 Ajax front-end. Very nice to look at, lots of features, good examples, good API documentation and limited general documentation.

I knew I wanted to save state and restore it on the next visit. The first components I created had a 'stateful' option. As it happens I was luck as this defaults to 'true'. For the life of me I could not find an example I trusted.

Finally, after prompting, I looked at the source. Once you know how, it is easy. 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 Ext people have already written 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 man Ext.onReady function.