Question

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

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

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

我设计了覆盖面板（example of overlay），这样当用户选择另一个标签但尚未登录时，我就会显示重叠式登录面板。

我的问题是，当用户选择另一个标签时，将启用所选标签屏幕，该屏幕将显示在重叠登录屏幕下方。 如何禁用标签导航，以便在用户未登录时，他们无法看到其他标签屏幕，他们只能看到第一个标签屏幕？

Answer 1

以下是解决问题的示例代码段：

您可以通过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();
        }
    },

});

感谢。

如何在sencha touch中禁用选项卡面板导航

1 个答案: