2

我在我的应用程序中显示一个带有四个选项卡的选项卡面板，默认情况下显示第一个选项卡。

每当用户选择其他三个选项卡之一时，我需要通过检查本地存储用户令牌变量来检查用户是否已经登录。

如果我没有从本地存储用户令牌变量中获得有效值，或者用户尚未登录，那么我必须通过在选项卡面板上显示覆盖页面来要求用户登录。

我设计了覆盖面板（覆盖示例），以便当用户选择另一个选项卡并且尚未登录时，我将显示覆盖登录面板。

我的问题是，当用户选择另一个选项卡时，所选选项卡屏幕已启用，并且该屏幕出现在覆盖登录屏幕下方。如何禁用选项卡导航，以便在用户尚未登录时，他们看不到其他选项卡屏幕，只能看到第一个选项卡屏幕？

4

1 回答 1

2

这是解决您的问题的示例代码片段：

您可以通过以下方式处理此类事情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();
        }
    },

});

谢谢。

于 2013-01-01T07:53:28.870 回答