从自定义组件触发自定义事件并处理 viewController 中的事件

Question

我创建了一个扩展自 Ext.Panel 的自定义组件。我在自定义组件中添加了一个点击侦听器，这样当它被点击时就会触发一个事件。我正在视图中实例化自定义组件，我想处理从与该视图关联的 viewController 中的自定义组件触发的事件。

但是，当我触发事件时，它并没有冒泡到 viewController。有没有办法在全球范围内触发事件？我如何着手处理 viewController 中的事件，其中触发事件的组件在与视图控制器关联的视图中实例化？

我的自定义组件看起来像这样：

Ext.define('MyApp.ux.CustomComponent', {
  extend: 'Ext.Panel',

  xtype: 'custom-component'

  initComponent: function() {
    var me = this;
    me.callParent();

    me.addListener({
      'render': function(panel) {
        panel.body.on('click', function() {
          me.fireEvent('customEventName');
        });
      }
    });

  }
});

我正在像这样在视图中实例化我的自定义组件：

Ext.define('MyApp.view.main.Main', {
  extend: 'Ext.container.Container',

  controller: 'main'

  items: [{
    xtype: 'custom-component'
  }]
});

在我的 viewController 中（用于实例化我的自定义组件的视图）我有以下侦听器：

customEventName: function () {
  console.log('I have been fired');
}

Answer 1

要在全球范围内触发事件，您可以使用：

Ext.GlobalEvents.fireEvent('eventName', {args});

http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.GlobalEvents-method-fireEvent

编辑：

您可以尝试解决方法：

Ext.GlobalEvents.fireEvent('customEventName');

在你的控制器中：

listen: {
   global: {
     'customEventName': 'onClick'
   }
}

onClick: function(){
Ext.log('click happened');
}

Answer 2

视图控制器侦听子项侦听器，但不侦听手动触发的事件。因此，您需要为此使用侦听器配置，例如

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',

    controller: 'main'

    items: [{
        xtype: 'custom-component',
        listeners: {
            customEventName: 'customHandlerNameInController'
        }
    }]
});

现在，当您触发自定义事件时，您的视图控制器方法必须起作用。

从自定义组件触发自定义事件并处理 viewController 中的事件

Firing custom event from custom component and handle event in viewController

extjs

extjs6

extjs6-classic

extjs6-modern