Запуск пользовательского события из пользовательского компонента и обработка события в 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.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/

Редактировать:

Вы можете попробовать обходной путь:

Ext.GlobalEvents.fireEvent('customEventName');

В вашем контроллере:

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

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