javascript - 如何使用事件——选项卡激活容器时触发什么事件？ (extjs 6.5)

Question

在使用 sencha extjs 6.5 框架时，我遇到了事件问题。我想做的是创建一个商店，将加载推迟到激活选项卡之后。 (并在每次有人返回该选项卡时重新加载)。

现在手动加载并不难。但是我似乎找不到激活选项卡时发生的触发器。

选项卡由主视图定义(在 app.js 中显示为 main):

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.MessageBox',
        'Ext.layout.Fit',
    ],

    controller: 'main',
    viewModel: 'main',

    defaults: {
        tab: {
            iconAlign: 'top'
        }
    },

    tabBarPosition: 'left',

    items: [
        {
            title: 'Users',
            iconCls: 'x-fa fa-user',
            layout: 'fit',
            items: [{
                xtype: 'usercontainer',
            }],
        },{
            title: 'Home',
            iconCls: 'x-fa fa-home',
            layout: 'fit',
            items: [{
                xtype: 'ordercontainer'
            }]
        },
    ]
});

第二个选项卡是我感兴趣的，它具有以下定义:

Ext.define('BinkPortalFrontend.view.main.OrderContainer', {
    //extend: 'BinkPortalFrontend.view.main.BaseContainer',
    xtype: 'ordercontainer',
    controller: 'order',
    extend: 'Ext.Container',
    layout: 'vbox',

    listeners: {
        activate: function(me, oOpts) {
            console.log('activating');
        },

        enable: function(me, oOpts) {
            console.log('enabling');
        },

        focus: function(me, oOpts) {
            console.log('focus');
        },
        focusenter: function(me, oOpts) {
            console.log('focus');
        },
        focusleave: function(me, oOpts) {
            console.log('focus');
        },
        show: function(me, oOpts) {
            console.log('show');
        },
    }
});

如您所见，我已尝试测试各种事件。然而，只有激活事件似乎在页面加载时触发。我究竟做错了什么？我没有完全看到许多事件中的哪些是有用的(参见 here )

Answer 1

您可能想收听 tabchange(tabPanel, newCard, oldCard, eOpts)选项卡面板上的事件，然后在 newCard 上触发您自己的事件(可能在 oldCard 上触发您自己的事件)。