Results 1 to 6 of 6

Thread: Save layout AND active tab of collapsable tab panel

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default Save layout AND active tab of collapsable tab panel

    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?

    Code:
    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

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Within your getState implementation get the TabPanel's version and then add to it

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

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default

    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cambridge
    Posts
    97

    Default

    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.
    Code:
    return { width: this.width, collapsed: this.collapsed, activeTab: this.items.indexOf(this.getActiveTab()) };
    Would be nice to get a better solution going forward however.

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    74

    Default

    Quote Originally Posted by markalroberts View Post
    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...

    Code:
    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

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    55

    Default TabState for Extjs 4.1

    Is there any solution for this in extjs 4.1.3 ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •