2

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

可以很快看出，我已经尝试过测试各种事件。然而，只有激活事件似乎在页面加载时触发。我究竟做错了什么？我没有完全看到许多事件中的哪一个是有用的（见这里）

4

2 回答 2

2

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

于 2018-02-25T08:05:18.910 回答
1

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

激活时，“激活”事件将在选项卡本身上发射。请参阅文档： https ://docs.sencha.com/extjs/6.5.2/classic/Ext.container.Container.html#event-activate

它很可能在您的示例中不起作用，因为您已经（不必要地？）将“OrderContainer”嵌套在另一个名为“Home”的面板中。每次用户打开选项卡时，主页都会正确接收“激活”事件，但它的子级（如正在监听的 OrderContainer）没有。

所以我的建议是：

  1. 重新排列你的逻辑，让“home”组件是监听“activate”事件并做任何你想做的加载的那个组件。
  2. 完全删除“主页”面板，直接使用 orderContainer。

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

items: [
  {
     xtype: 'ordercontainer'
     tabConfig: {
        title: 'Home',
        iconCls: 'x-fa fa-home'
     }
  }
]
于 2018-11-08T21:06:11.857 回答