1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default Answered: How to store the selected tab on tab selection? (Ext.tab.Panel) + State Handling

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


    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:

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

    cookie.png

    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?
    Last edited by Albareto; 5 Nov 2012 at 6:11 AM. Reason: Changed title to add "+ State Handling" to make it a bit more clear

  2. 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:

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

  3. #2
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    Does someone know something about this?

  4. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default Solved.

    Solved.


    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:

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

Tags for this Thread