Почему в Extjs 4 не срабатывает мой запуск настраиваемого события om image?

Question

Обновление 2: это подтверждает, что событие cpuchartclicked запускается, потому что предупреждение ('привет') работает. Что мне нужно, так это чтобы я мог отвечать на это событие в моем контроллере.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            },
            'cpuchartclicked':function () {
                alert('hello');
            }
        }
    }

]

Обновление: с помощью следующего я устанавливаю область действия для обработчика нажатия. Кажется, что fireEvent() работает сейчас, но все еще не слышит событие в контроллере.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    alert('on click handler');
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]

// Listen Application Event
me.application.on({
    cpuchartclicked: me.onChartClicked,
    scope: me
});

---

Я пытаюсь запустить пользовательское событие на изображении, поэтому при нажатии на изображение контроллер слышит это событие.

Но я получаю сообщение об ошибке cmp.fireEvent() не функция?

items: [{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners:{
        'afterrender':function (comp) {
        comp.getEl().on('click', function (el) {
        el.fireEvent('cpuchartclicked');
        });
        }
    }
}]

me.application.on({
    cpuchartclicked: this.onChartClicked,
    scope: this
});

Answer 1

Вы путаете Компоненты и Элементы. afterrender слушатель события устанавливается в компоненте изображения и получает сам компонент в качестве первого аргумента (который вы назвали el вместо неправильно).

Затем в afterrender слушатель, вы извлекаете основной элемент DOM для этого компонента, который оказывается <img> тег и установить click слушатель на объекте элемента, который является экземпляром Ext.dom.Element,

click подпись события не то, что вы ожидаете; первый аргумент Ext.util.Event объект, который не имеет fireEvent метод. Отсюда и ошибка.

Я бы посоветовал посмотреть подписи событий в документах перед их использованием. Также попробуйте добавить debugger оператор перед строкой, которая взорвется, и посмотрите, какие переменные передаются и что происходит. Использование отладчика Chrome или Firefox может быть очень полезным здесь.

Answer 2

Решил это, хотя мне интересно, если это лучший способ сделать это.

Я запускаю пользовательское событие через изображение, а затем прослушиваю это событие на изображении также в контроллере.

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]


'myContainer image':
{
    'cpuchartclicked': me.onChartClicked
}

Answer 3

Вы должны привязать элемент изображения следующим образом:

{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners: {
      el: {
          click: function() {
          console.log("Click");
          }
      }
    }
}

это решит мою проблему в ext5