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'
}]
}]
});
}
});
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.