1

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

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

如果用户登录，那么我需要 2/3/4 选项卡，你点击了什么。

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

我在标签面板视图中编写了以下代码

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

它显示这样的错误但是，它正在工作（我不希望出现以下错误，即使它工作）

Uncaught Error: [ERROR][Ext.Container#factoryItem] Invalid config, must be a valid config object sencha-touch-all-debug.js:26029
Ext.define.doWrite sencha-touch-all-debug.js:26029
Ext.define.write sencha-touch-all-debug.js:18416
Ext.define.log sencha-touch-all-debug.js:18298
(anonymous function) sencha-touch-all-debug.js:18316
Ext.apply.factory sencha-touch-all-debug.js:9221
Ext.define.factoryItem sencha-touch-all-debug.js:64065
Ext.define.applyActiveItem sencha-touch-all-debug.js:64664
(anonymous function) sencha-touch-all-debug.js:27233
Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:39
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:38
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.doTabChange sencha-touch-all-debug.js:76619
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:58971
Ext.define.publish sencha-touch-all-debug.js:59031
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
(anonymous function) sencha-touch-all-debug.js:27246
Ext.define.onTabTap sencha-touch-all-debug.js:76344
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:58971
Ext.define.publish sencha-touch-all-debug.js:59031
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
Ext.define.doFireEvent sencha-touch-all-debug.js:26577
Ext.define.fireAction sencha-touch-all-debug.js:26566
Ext.define.onTap sencha-touch-all-debug.js:56146
Ext.define.doFire sencha-touch-all-debug.js:17322
Ext.define.fire sencha-touch-all-debug.js:17249
Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
Ext.define.dispatch sencha-touch-all-debug.js:17687
Base.implement.callParent sencha-touch-all-debug.js:4516
Ext.define.dispatch sencha-touch-all-debug.js:23074
Ext.define.doPublish sencha-touch-all-debug.js:23116
Ext.define.publish sencha-touch-all-debug.js:23081
Base.implement.callParent sencha-touch-all-debug.js:4516
Ext.define.publish sencha-touch-all-debug.js:23473
Ext.define.onRecognized sencha-touch-all-debug.js:23457
Ext.define.fire sencha-touch-all-debug.js:17748
Ext.define.onTouchEnd sencha-touch-all-debug.js:24429
Ext.define.invokeRecognizers sencha-touch-all-debug.js:23523
Ext.define.onTouchEnd sencha-touch-all-debug.js:23672
override.processEvent sencha-touch-all-debug.js:23744
Ext.define.onEvent sencha-touch-all-debug.js:23350
Base.implement.callParent sencha-touch-all-debug.js:4516
override.onEvent sencha-touch-all-debug.js:23740
(anonymous function) sencha-touch-all-debug.js:3128

这是我的标签面板

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

1 回答 1

1

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

因此，与其监听activeitemchange事件，不如在活动项更改之前进行登录检查。但是没有这样的事件。我尝试使用addBeforeListenerfor activeitemchange，但它属于递归调用。所以我尝试addAfterListener了activeitemchange并且它起作用了。这是我尝试过的，

  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 时，选项卡面板将活动项目设置为第一个项目。在这里，我使用标题来标识当前处于活动状态的项目。如果当前活动项目是“第一个选项卡”（在您的情况下，它是登录表单的标题），那么不要做任何事情。

试一试，它有效。

于 2013-04-10T20:15:39.477 回答