Question

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

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

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

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

我在tabpanel视图中编写了以下代码

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

Answer 1

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

因此，不应该收听activeitemchange事件，而应该在之前更改登录检查。但是没有这样的事件。我尝试将addBeforeListener用于 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;
               }
           });
        }
    }
});

我尝试使用计数器来模仿登录/注销情况。因此，当计数器达到＆gt; = 4时，选项卡面板将活动项目设置为第一项。在这里，我使用title来识别当前活动的项目。如果当前活动的项目是“第一个标签”（在您的情况下，它是登录表单的标题），那么不要做任何事情。

尝试一下，它有效。

我如何控制sencha tabpanel导航

1 个答案: