extjs - sencha タブパネルのナビゲーションを制御するにはどうすればよいですか

Question

私は 4 つのタブを持つタブパネルを持っています。アプリケーションの起動が完了した後、タブパネルを表示しています (最初のタブがアクティブなアイテムになります)。ユーザーが他の 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');
                }
            }
        }
    }
});

score 1 · Accepted Answer

私の理解によれば、あなたがやろうとしていることは、ユーザーがログインしていないときに、ポップアップまたはメッセージボックスにメッセージを表示する代わりに、ログインフォームを表示するタブ項目をアクティブにしたいということです。

そのため、イベントをリッスンする代わりに、アクティブなアイテムのactiveitemchange変更前にログインチェックを行う必要があります。しかし、そんなイベントはありません。for activeitemchangeを使用してみましたが、再帰呼び出しに陥ります。だから私はactiveitemchangeを試してみましたが、うまくいきました。これが私が試したことです、addBeforeListeneraddAfterListener

  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 に達すると、タブパネルはアクティブなアイテムを最初のアイテムに設定します。ここでは、タイトルを使用して、現在アクティブなアイテムを識別しています。現在アクティブなアイテムが「最初のタブ」（あなたの場合、ログインフォームのタイトル）の場合は、何もしないでください。

試してみてください、うまくいきます。

extjs - sencha タブパネルのナビゲーションを制御するにはどうすればよいですか

1 に答える 1

Related

Reference