如何使用事件--当选项卡激活容器时会触发什么事件？(第6.5段)

Question

在使用sencha extjs6.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');
        },
    }
});

正如人们很快看到的，我尝试过测试各种事件。但是，似乎只有激活事件才会触发-at页面加载。我做错了什么？我看不出这多个事件中哪一个会有用(参见这里)

Answer 1

您可能希望在面板上侦听tabchange(tabPanel, newCard, oldCard, eOpts)事件，然后在newCard上激发您自己的事件(或者在oldCard上触发另一个事件)。

Answer 2

我意识到这是一个很老的问题，已经有了答案。但我希望未来的人(像我)发现这一点，这里是另一个观点。

"activate“事件在激活时会在选项卡本身上触发。见文档：https://docs.sencha.com/extjs/6.5.2/classic/Ext.container.Container.html#event-activate

它在您的示例中不起作用，很可能是因为您已经嵌套了(不必要的？)另一个名为"Home“的面板中的"OrderContainer”。每次用户打开选项卡时，Home都会正确地接收"activate“事件，但是它的”子“(比如正在监听的OrderContainer )不会接收。

因此，我的建议是：

1. 重新排列您的逻辑，所以"home“组件是监听”激活“事件并执行任何您想要做的加载的人。
2. 完全删除"Home“面板，直接使用orderContainer即可。

如果只有"Home“来提供标题和图标，则可以通过tabConfig属性将它们添加到tabConfig中：

items: [
  {
     xtype: 'ordercontainer'
     tabConfig: {
        title: 'Home',
        iconCls: 'x-fa fa-home'
     }
  }
]