2

我创建了一个从 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');
}
4

2 回答 2

3

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

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

    controller: 'main'

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

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

于 2016-01-27T21:27:43.817 回答
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');
}
于 2016-01-26T18:37:11.440 回答