PDA

View Full Version : Save layout AND active tab of collapsable tab panel



markalroberts
18 Sep 2009, 2:37 AM
Hi. I seem to be posting lots of questions at the moment... thanks for all the help I've had so far!

I wish to save the state of a collapsible TabPanel using the StateManager. This works "out of the box" for the width and collapsed state, but not for the currently selected tab.

Saki has an example Plug-in for saving the current Tab (code reproduced below). This is great.

Unfortunately, there are times when this code breaks the default persistence of the underlying Tab Panel... When one changes the active tab, that gets saved but replaces the width/collapsed saved values, so when the screen is refreshed, the active tab shows but the width/collapsed values are back to default.

It seems to me that when getState is called, it should be possible to _add_ to the state of the underlying panel, rather than replace it.

Any ideas?



Ext.ns('Ext.ux.state');

// dummy constructor
Ext.ux.state.TabPanel = function() {};

Ext.override(Ext.ux.state.TabPanel, {
/**
* Initializes the plugin
* @param {Ext.TabPanel} tabpanel
* @private
*/
init: function(tabpanel) {

// update state on node expand or collapse
tabpanel.stateEvents = tabpanel.stateEvents || [];
tabpanel.stateEvents.push('tabchange');

// add state related props to the tree
Ext.apply(tabpanel, {

// returns activeTab
getState: function(s) {
return { activeTab: this.items.indexOf(this.getActiveTab()) };
} // eo function getState

});
} // eo function init

}); // eo override

aconran
18 Sep 2009, 4:19 AM
Within your getState implementation get the TabPanel's version and then add to it



var state = Ext.TabPanel.prototype.getState.call(this);
Ext.apply(state, {activeTab: this.items.indexOf(this.getActiveTab()) });
return state;

markalroberts
18 Sep 2009, 5:27 AM
Hi. Thanks for the reply calling Ext.TabPanel.prototype.getState.call(this) from getState() always returns null for me, so unfortunately, this doesn't work.

markalroberts
18 Sep 2009, 7:24 AM
Hi again. I can't quite work out why, but it seems that getState on the TabPanel only starts returning useful stuff when one of the stateEvents that trigger it (resize/collapse) fire. This appears to be why if one refreshes the screen, then changes Tab, the base getState doesn't return {width, collapsed}. My workaround for now is to include this manually i.e.


return { width: this.width, collapsed: this.collapsed, activeTab: this.items.indexOf(this.getActiveTab()) };

Would be nice to get a better solution going forward however.

cginzel
28 Dec 2009, 12:37 PM
Hi. Thanks for the reply calling Ext.TabPanel.prototype.getState.call(this) from getState() always returns null for me, so unfortunately, this doesn't work.

I found the same but for me the following tiny piece in red fixes that issue...


Ext.ns('Ext.ux.state');

// dummy constructor
Ext.ux.state.TabPanel = function() {};

Ext.override(Ext.ux.state.TabPanel, {
/**
* Initializes the plugin
* @param {Ext.TabPanel} tabpanel
* @private
*/
init: function(tabpanel) {

// update state on node expand or collapse
tabpanel.stateEvents = tabpanel.stateEvents || [];
tabpanel.stateEvents.push('tabchange');

// add state related props to the tree
Ext.apply(tabpanel, {

// returns activeTab
getState: function(s) {
var state = Ext.TabPanel.prototype.getState.call(this) || {};
Ext.apply(state, {activeTab: this.items.indexOf(this.getActiveTab())});
return state;
} // eo function getState

});
} // eo function init

}); // eo override

extjs.mscit
24 Jun 2013, 5:38 AM
Is there any solution for this in extjs 4.1.3 ?