Extjs 如何控制sencha选项卡面板导航

我有一个带有四个选项卡的tabpanel，在应用程序启动完成后，我将显示tabpanel（第一个选项卡将是活动项），当用户尝试点击任何其他3个选项卡时，我需要检查用户是否已登录

如果用户没有登录，那么我需要显示登录布局面板，并将第一个选项卡设置为活动项

如果用户登录，则我需要2/3/4选项卡，您单击了什么

如果用户未登录，我可以显示登录覆盖面板，但将活动项更改回第一个选项卡是问题所在

我在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');
        }
    }
}

它显示了这样的错误，但它的工作（我不希望下面的错误，即使它的工作）

这是我的标签面板

    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');
                }
            }
        }
    }
});

---

根据我的理解，您试图做的是，当用户未登录时，而不是在弹出窗口或消息框中显示一些消息，您希望激活显示登录表单的选项卡项

因此，不应该监听

activeitemchange

事件，而应该在activeitemchange之前进行登录检查。但没有这样的事件。我尝试对activeitemchange使用

addBeforeListener

，但它属于递归调用。因此，我尝试了activeitemchange的

addAfterListener

，效果很好。这是我试过的

  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;
               }
           });
        }
    }
});

我尝试使用计数器模拟登录/注销情况。所以当计数器达到>=4时，选项卡面板将活动项设置为第一项。在这里，我使用title来标识当前处于活动状态的项目。如果当前活动项是“第一个选项卡”（在您的情况下，它是登录表单的标题），则不要执行任何操作

---

试一试，它就行了。

据我所知，您想做的是，当用户未登录时，而不是在弹出窗口或消息框中显示一些消息，您想激活显示登录表单的选项卡项

因此，不应该监听

activeitemchange

事件，而应该在activeitemchange之前进行登录检查。但没有这样的事件。我尝试对activeitemchange使用

addBeforeListener

，但它属于递归调用。因此，我尝试了activeitemchange的

addAfterListener

，效果很好。这是我试过的

  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;
               }
           });
        }
    }
});

我尝试使用计数器模拟登录/注销情况。所以当计数器达到>=4时，选项卡面板将活动项设置为第一项。在这里，我使用title来标识当前处于活动状态的项目。如果当前活动项是“第一个选项卡”（在您的情况下，它是登录表单的标题），则不要执行任何操作

---

试试看，它能用。

这行有什么用--

this.getAt（0.setActiveItem（'firstTab'）是否已将活动项更改为第一个选项卡面板？另一件事，
setActiveItem
期望将对象或数字作为参数
'firstTab'
似乎是一个字符串。firstTab是第一个tab的X类型。您可能不需要第二行。您是否尝试过不添加它？是的，如果我删除第二行，则第一个选项卡处于活动状态，但第一个选项卡的视图显示第二个选项卡视图（我的意思是xtype“secondtab”）。我还发布了我的标签面板。。查看我的更新这行有什么用--
this.getAt（0.setActiveItem（'firstTab'）是否已将活动项更改为第一个选项卡面板？另一件事，
setActiveItem
期望将对象或数字作为参数
'firstTab'
似乎是一个字符串。firstTab是第一个tab的X类型。您可能不需要第二行。您是否尝试过不添加它？是的，如果我删除第二行，则第一个选项卡处于活动状态，但第一个选项卡的视图显示第二个选项卡视图（我的意思是xtype“secondtab”）。我还发布了我的标签面板。。查看我的更新不完全是我想要的，但我从您的代码中得到了帮助我解决问题的想法。。谢谢@phobos这不是我想要的，但我从你的代码中得到了帮助我解决问题的想法。。谢谢@phobos