如何使用事件——选项卡激活容器时触发什么事件？ (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 上触发一个不同的事件）。

Answer 2

我意识到这是一个已经有了答案的非常古老的问题。但我希望未来的人（比如我自己）发现这个，这是另一个视角。

"activate" 事件在选项卡激活时触发。请参阅文档： https://docs.sencha.com/extjs/6.5.2/classic/Ext.container.Container.html#event-activate

它在您的示例中不起作用很可能是因为您将 "OrderContainer" 嵌套（不必要？）在另一个名为 "Home" 的面板中。每次用户打开选项卡时，Home 都会正确接收 "activate" 事件，但它的 children（就像正在监听的 OrderContainer）不会。

所以我的建议是：

重新安排您的逻辑，使 "home" 组件监听 "activate" 事件并执行您想执行的任何加载操作。
完全删除 "Home" 面板，直接使用 orderContainer。

如果您只有 "Home" 提供标题和图标，您可以通过 tabConfig 属性:

将它们添加到 OrderContainer

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

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

How to use events -- what event is triggered when a tab activates a container? (extjs 6.5)

javascript

events

extjs

extjs6.5