Implementing state preservation with cookies

In this recipe, you will learn to use the state management features in Ext JS for preserving the selected tab in a TabPanel across page loads. Specifically, the selected tab's ID will be saved to and read from a cookie.

A notification of a State Change event will be displayed upon selecting a tab, as shown in the following screenshot:

As seen in the following screenshot, after a page reload, the TabPanel recovers its previous state:

How to do it...

1. 1. Create a naming container for your code:

   Ext.ns('Example');
   

2. 2. Define the StatefulTabPanel class as an extension of Ext.TabPanel and configure the state management options:

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

3. 3. Define the state provider, a CookieProvider instance:

   Ext.onReady(function() {
   var cp = new Ext.state.CookieProvider(...