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

我创建了一个扩展自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');
}

---

视图控制器监听子项监听器，但不监听手动触发的事件。 所以，你需要像这样使用监听器配置

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

    controller: 'main'

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

现在，当您启动自定义事件时，您的视图控制器方法必须工作。

---

要全球发布活动，您可以使用：

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');
}

链接地址: http://www.djcxy.com/p/19551.html

上一篇: Firing custom event from custom component and handle event in viewController

下一篇: ExtJS call controller method inside Ext.util.Observable.observe