Question

I am displaying a tab panel with four tabs in my application, with the first tab displaying by default.

Whenever the user selects one of the other three tabs, I need to check whether the user is already logged in or not by checking the local storage user token variable.

If I do not get a valid value from the local storage user token variable, or the user didn’t log in yet, then I have to ask the user to log in by displaying an Overlays page over the tabpanel.

I designed the overlay panel (example of overlay) such that when user selects another tab and hasn’t logged in yet, then I am showing the overlay login panel.

My problem is that when user selects another tab, the selected tab screen is enabled and that screen appears under the overlay login screen. How can I disable tab navigation so that when the user hasn’t logged in, they can’t see other tab screens and they can see only the first tab screen?

Answer 1

Here is a example code snippet to solve your problem:

You can handle such things from your Controller :

Ext.define('MyTest.controller.Home',{
    extend : 'Ext.app.Controller',  

    config : {
        refs : {
            tabHome     : "#mainView tab[iconCls=home]",
            tabProduct  : "#mainView tab[iconCls=products]",

        },
        control : {
            tabHome : {
                tap : 'showHome'
            },

            tabProduct : {
                tap : 'showProduct'
            },

        }
    },

    showHome : function () {
        if(getLoginState() == true){
            Ext.Viewport.getActiveItem().getAt(1).setActiveItem('homeView');
        }
        else{
            Ext.Viewport.getActiveItem().getAt(0).setActiveItem('dashboardView');
            showLoginOverlay();
        }
    },

    showProduct : function () {
        if(getLoginState() == true){
            Ext.Viewport.getActiveItem().getAt(2).setActiveItem('productView');
        }
        else{
            Ext.Viewport.getActiveItem().getAt(0).setActiveItem('dashboardView');
            showLoginOverlay();
        }
    },

});

Thanks.