PDA

View Full Version : How to store the selected tab on tab selection? (Ext.tab.Panel) + State Handling



Albareto
5 Nov 2012, 6:07 AM
Hi there,

I am working with state handling, I have a tab panel and I want to store the tab when it changes, is there anything out of the box for this? Setting stateful to true, stateEvents : ['tabchange'] and stateId: 'myState' does not work. With "out of the box" I mean if this can be done without having to program the logic myself.

This is a very easy example that does not store anything in the Cookie:


Ext.onReady(function()
{
Ext.state.Manager.setProvider(new Ext.state.CookieProvider(
{
expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

Ext.tip.QuickTipManager.init();

Ext.create('Ext.container.Viewport',
{
layout: 'border',
items:
[
Ext.create('Ext.tab.Panel',
{
title : 'panel',
region: 'center',

stateId : 'tabpanelState',
stateful : true,
stateEvents : ['tabchange'],

items :
[
{
title : 'tab 1',
id : 'tab1',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 2',
id : 'tab2',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 3',
id : 'tab3',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 4',
id : 'tab4',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 5',
id : 'tab5',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 6',
id : 'tab6',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 7',
id : 'tab7',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
},
{
title : 'tab 8',
id : 'tab8',
html : '<div id="tab1">Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/>Some text here<br/></div>'
}

]
})
]
});
});

This is the resulting cookie:

39823

The result of decoding that value (Ext.state.Manager.getProvider().decodeValue('o%3A')) is an empty Object. So nothing is stored.

What's the way to go with this?

Albareto
5 Nov 2012, 11:28 PM
Does someone know something about this?

Albareto
6 Nov 2012, 6:58 AM
I have a solution for this, might be useful for other people also as State handling, as far as I have seen, is kind of a black box in ExtJS.

In my tab panel declaration I added the methods getState and applyState:



Ext.define('My.tab.Panel',
{
extend : 'Ext.tab.Panel',
//some extra config here and there...

getState : function()
{
if (this.stateful)
{
var state = this.callParent() || {};
if (Ext.Array.contains(this.stateEvents, 'tabchange'))
{ //important not to call this activeTab otherwise it does not work
state.stateTab = this.activeTab.getId();
}
return state;
}
return {};
},

applyState : function(state)
{
if (this.stateful)
{
this.callParent(arguments);

if (Ext.Array.contains(this.stateEvents, 'tabchange'))
{
var tab = state ? state.stateTab : 0;
this.on('boxready', function()
{
this.setActiveTab(tab || 0);
}, this);
}
}
}
});


So this saves the selected tab and other stuff you have setup (and ExtJS is able to handle by itself). Check that the applyState in the parent just does Ext.apply(tabPanel, state); so everything that you have in the state and it is a valid config option will be just thrown to the tabpanel instance.