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

[Albareto]

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:

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?

[Albareto]

Does someone know something about this?

[Albareto]

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.