代码之家 › 专栏 › 技术社区 › Viswa

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

sencha-touch-2 sencha-touch extjs

Viswa · 技术社区 · 13 年前

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

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

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

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

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

1 回复 | 直到 13 年前

SachinGutte 13 年前

根据我的理解,你试图做的是,当用户没有登录时,你想激活显示登录表单的选项卡项,而不是在弹出窗口或消息框中显示一些消息。

所以与其听 activeitemchange 事件,应进行登录检查 活动项目之前 改变但没有这样的事件。我试着用 addBeforeListener 对于 活动项更改 但它属于递归调用。所以我试着 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来标识当前处于活动状态的项目。如果当前活动项目是“第一个选项卡”(在您的情况下,它是登录表单的标题),那么什么都不要做。

试试看,它有效。