Saving state of an Ext JS TabPanel in a cookie

Snippet to show saving tab panel state into a cookie, and then loading it back again. This uses the Sencha ExtJS library.

Ext.application({
  launch: function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
      expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7))
    }));
    Ext.create('Ext.container.Viewport', {
      layout: 'absolute',
      items: [{
        x: 50,
        y: 50,
        width: 300,
        height: 300,
        xtype: 'tabpanel',
        stateful: true,
        stateId: 'tp1',
        stateEvents: ['tabchange'],
        getState: function() {
          return {
            activeTab: this.items.findIndex('id',this.getActiveTab().id)
          };
        },
        applyState: function(s) {
          this.setActiveTab(s.activeTab);
        },
        items: [{
          id: 'c0',
          title: 'Tab One'
        }, {
          id: 'c1',
          title: 'Tab Two'
        }, {
          id: 'c2',
          title: 'Tab Three'
        }]
      }]
    });
  }
});

Comments

  • Hi,

    You sample did not work for me because of this: activeTab: this.items.indexOf(this.getActiveTab()). I’m not 100% percent sure why, but what it does it searchs index of you entire object in the items collection of you container.

    Instead I used this: activeTab:this.items.findIndex(‘id’,this.getActiveTab().id), searching for the id.

    I use ExtJS 4.1.1a

  • Thanks! I’ll make that change in the example.

  • Leave a comment