1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    1
    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
    1
    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
    1
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi