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.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',

    controller: 'main'

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

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

Answer 2

要全局触发事件，您可以使用：

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

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

2 个答案: