PDA

View Full Version : Refreshing the TabPanel takes me to the first tab always



thangamalar
21 Jul 2010, 1:30 AM
Please find attached screen shot where in if I go to any tab and refresh the page using refresh button in the browser window, the page goes to "Getting Started" page by default. All I want is if I select Cluster Tab and when I refresh, it should still display the same tab. Please help me how do I acheive this.

BitPoet
21 Jul 2010, 6:43 AM
As hitting the browser's refresh button completely unloads and reloads all javascript, you'll need the app to remember things like which tab was active somewhere else. That's where Ext.StateManager comes into play. See its docs, the docs for Ext.TabPanel's stateful property, and especially the article on saving and restoring states (http://www.sencha.com/learn/Manual:Core:State) in the ext community manual (which, incidentally, shows how to save a tabpanel's active tab).

thangamalar
28 Jul 2010, 5:03 AM
Even after modifying as mentioned in the example like below, it doesn't work still. It always goes to first tab which was activated. ANy idea?




Ext.onReady(function(){

//Ext.state.Manager.setProvider (new Ext.state.CookieProvider());
Ext.state.Manager.setProvider(
new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*365)) //1 year from now
}));
Ext.QuickTips.init();

var tabPanel = new Ext.TabPanel({

region:'center',
stateEvents: ['tabchange'],
getState: function() {return{activeTab:this.getActiveTab().id}},
applyState: function(state) {this.setActiveTab(state.tab);},
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[{.....}]
.......
});

aconran
28 Jul 2010, 11:22 AM
Set the stateful configuration and a stateId.

thangamalar
29 Jul 2010, 1:07 AM
Yes. I could make it with Ext.state class as marked in RED color below. Thanks for your time guys. :)



Ext.state.Manager.setProvider(
new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*30)) //30 days from now
}));
Ext.QuickTips.init();

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
region:'center',
id:'vxTabs',
//activeTab:0,
stateEvents: ['tabchange'],
activeTab: Ext.state.Manager.get('active_tab', 0),
stateful:true,
//deferredRender:false, // True by default to activate the tab action upon clicking the tab.
autoScroll: true,
margins:'0 4 4 0',
listeners: {
'tabchange': function(){
Ext.state.Manager.set('active_tab', Ext.getCmp('vxTabs').getActiveTab().getId());
}
},....
});
......
});