How do i control sencha tabpanel navigation

1
votes

I have a tabpanel with four tabs, After the application finished launching, I am showing tabpanel (first tab will be active item) and When the user trying to tap any other 3 tabs, I need to check the user logged in already or not.

If the user didn't logged in then i need to show login layout panel and i need to set first tab as active item.

If the user logged in then i need to 2/3/4th tab, what ever your clicked.

I can show login overlay panel if the user didn't logged in, but changing the active item back to first tab is the problem.

I wrote the following code at tabpanel view

    listeners : {
    activeitemchange : function() {
        var token = localStorage.token; // user already logged in there will be a token at localStorage.
        if (token == undefined || token == '') {
            this.setActiveItem(0);
            this.getAt(0).setActiveItem('firstTab');
        }
    }
}

It showing error like this but, Its woking (i don't want below error, even though its working)

Uncaught Error: [ERROR][Ext.Container#factoryItem] Invalid config, must be a valid config object sencha-touch-all-debug.js:26029
Ext.define.doWrite sencha-touch-all-debug.js:26029
Ext.define.write sencha-touch-all-debug.js:18416
Ext.define.log sencha-touch-all-debug.js:18298
(anonymous function) sencha-touch-all-debug.js:18316
Ext.apply.factory sencha-touch-all-debug.js:9221
Ext.define.factoryItem sencha-touch-all-debug.js:64065
Ext.define.applyActiveItem sencha-touch-all-debug.js:64664
(anonymous function) sencha-touch-all-debug.js:27233
Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:39
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:38
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.doTabChange sencha-touch-all-debug.js:76619
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:58971
Ext.define.publish sencha-touch-all-debug.js:59031
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.onTabTap sencha-touch-all-debug.js:76344
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:58971
Ext.define.publish sencha-touch-all-debug.js:59031
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
Ext.define.onTap sencha-touch-all-debug.js:56146
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:17687
Base.implement.callParent sencha-touch-all-debug.js:4516
Ext.define.dispatch sencha-touch-all-debug.js:23074
Ext.define.doPublish sencha-touch-all-debug.js:23116
Ext.define.publish sencha-touch-all-debug.js:23081
Base.implement.callParent sencha-touch-all-debug.js:4516
Ext.define.publish sencha-touch-all-debug.js:23473
Ext.define.onRecognized sencha-touch-all-debug.js:23457
Ext.define.fire sencha-touch-all-debug.js:17748
Ext.define.onTouchEnd sencha-touch-all-debug.js:24429
Ext.define.invokeRecognizers sencha-touch-all-debug.js:23523
Ext.define.onTouchEnd sencha-touch-all-debug.js:23672
override.processEvent sencha-touch-all-debug.js:23744
Ext.define.onEvent sencha-touch-all-debug.js:23350
Base.implement.callParent sencha-touch-all-debug.js:4516
override.onEvent sencha-touch-all-debug.js:23740
(anonymous function) sencha-touch-all-debug.js:3128

This is my tab panel

    Ext.define('myapp.view.myTab', {
    extend : 'Ext.TabPanel',
    xtype : 'mytab',
    requires : [ 'myapp.view.FirstTab', 'myapp.view.SecondTab',
            'myapp.view.ThirdTab', 'myapp.view.FourthTab' ],
    id : 'mytab',
    config : {
        fullscreen : true,
        tabBarPosition : 'bottom',
        ui: 'myUI',
        items : [ {
            xtype : 'firsttab',
            iconCls : 'broadcast',
            title : 'first tab'
        }, {
            xtype : 'secondtab',
            iconCls : 'user_fave',
            title : 'second tab'
        },{
            xtype : 'thirdtab',
            iconCls : 'user3',
            title : 'third tab'
        },{
            xtype : 'fourthtab',
            iconCls : 'address_book',
            title : 'Contacts',
            id : 'Fourth Tab'
        } ],
        listeners : {
            activeitemchange : function() {
                var token = localStorage.token;
                if (token == undefined || token == '') {
                    this.setActiveItem(0);
                    // this.getAt(0).setActiveItem('firsttab');
                }
            }
        }
    }
});
1
extjssencha-touchsencha-touch-2
what's the use of this line --this.getAt(0).setActiveItem('firstTab'); if you already changed active item to first tabpanel ? Another thing, setActiveItem expects and object or number as param. 'firstTab' seems to be a string. - SachinGutte
firstTab is an xtype of first tab - Viswa
you probably don't need that second line. Have you tried w/o adding it ? - SachinGutte
yes, if i remove second line then first tab is active but, view of the first tab showing second tab view (i mean xtype "secondtab"). i also posted my tabpanel.. see my update - Viswa

1 Answers

1
votes

What you are trying to do , as per my understanding is, when user is not logged in, instead of showing some message in pop up or msg box you want to activate tab item that shows login form.

So instead of listening to activeitemchange event, login check should be done beforeactiveitem change. But there's no such event. I tried using addBeforeListener for activeitemchange but it fall into recursive calls. So I tried with addAfterListener for activeitemchange and it worked. Here's what I tried, 

  Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'First Tab',
            iconCls: 'broadcast',
            html: 'First Tab'
        },
        {
            title: 'Second Tab',
            iconCls: 'user_fav',
            html: 'Second Tab'
        },
        {
            title: 'Third Tab',
            iconCls: 'user3',
            html: 'Third Tab'
        },
        {
            title: 'Forth Tab',
            iconCls: 'address_book',
            html: 'Forth Tab'
        },
        {
            title: 'Fifth Tab',
            iconCls: 'user',
            html: 'Fifth Tab'
        }

    ],
    listeners:{
        initialize:function(){
            var counter = 1;
            this.addAfterListener("activeitemchange",function(){
               counter += 1;
               if(counter >= 4){
                   if(this.getActiveItem().title !="First Tab")
                       this.setActiveItem(0);
                   else
                        return false;
               }
           });
        }
    }
});

I tried to mimic logged-in/logged-out situations by using counter. So when counter reaches to >= 4, tab panel sets active item to first item. Here I've used title to identify which item is currently active. If currently active item is "First Tab" ( in your case, it title of login form ), then don't do anything.

Give it a try, it works.