tab panel and my login overlay panel (I need solution for this situation)

[Viswa317]

This is my first application using sencha touch.

i developed android sencha application, after application launched login page will appears and user need to login, after user successfully logged in the tab panel will appers with four tabs and i did it.

Now my client is asked me to change the flow that, after application launched i need to show tab panel with the same four tab as i said above, not the login panel and when ever user selects other three tab (except first tab) i need check whether user is logged in or not.

if the user didn't logged in yet, i need to ask them to login by showing login overlay panel over the tab panel and I need to stay first tab screen even though user taps any other three tabs (this is really important )

1) where i have to check user is logged in or not?

i created separate controller for tab navigation

Ext.define('myApp.controller.myappTabController', {    extend : 'Ext.app.Controller',


    init : function() {
        this.callParent(arguments);
        console.log('init myappTap Controller');
    },
    config : {
        refs : {
                        // this is tab panel id 
            tabSelect : "#myAppTab",
        },
        control : {
            tabSelect : {
                activeitemchange : 'onTabSelect'
            }
        }
    },
    
    onTabSelect : function() {
          alert("in tab controller ");

         // checking user logged in or not
        var token = localStorage.token;

        if(token == undefined || token == '') {

         // to stay in first tab screen if the user didn't logged in yet.
           Ext.Viewport.getActiveItem().getAt(0).setActiveItem('FirstTab');

       /* this is working, but for example when user taps SecondTap, FirstTab view screen is appears in the screen as i needed, but still it shows selected tab as SecondTap in tabpanel UI, because if user taps SecondTap, sencha applying x-tab-active class to that tab button div, i don't want to change  x-tab-active class to any other tab even though user taps other tab, i want to showselected tab as FirstTab if the user didn't logged in  :-?*/


          // displyOverlayLoginScreen();
        }
   }
    
});

-----------------------------------------------------------------------------
This is my tab panel

Ext.define('myApp.view.myAppTab', {    extend : 'Ext.TabPanel',
    xtype : 'myAppTab',
    requires : ['myAppTab.view.FirstTab', 'myAppTab.view.SecondTab', 'myAppTab.view.ThirdTab', 'myAppTab.view.FourthTab'],
    id : 'myAppTab',
    config : {
        fullscreen : true,
        tabBarPosition : 'bottom',
        items : [{
            xtype : 'firstTab',
            iconCls : 'star',
            title : 'firstTab'
        }, {
            xtype : 'secondTab',
            iconCls : 'info',
            title : 'secondTab'
        }, {
            xtype : 'thirdTab',
            iconCls : 'user',
            title : 'thirdTab',
        }, {
            xtype : 'fourthTab',
            iconCls : 'settings',
            title : 'fourthTab'
        }]
    }
});

---------------------------------------------------------------------------------------
every view class (firstTab, secondTab, thirdTab, fourthTab) has listeners like this one, because before the view pained in viewport, i need to make ajax request to my server and with response i need to make store and using the store i have to display list of messages.

        
listeners : {        activate : function() {
        alert('Mywants Listeners');
        this.fireEvent('fireMyWants', this);                    
        }

[szimek]

Maybe you could try using "onBefore" and stop "activeitemchange" by returning "false" if user is logged out? This way Sencha shouldn't really switch to the second tab. Here's doc for this: http://docs.sencha.com/touch/2-1/#!/api/Ext.mixin.Observable-method-onBefore