ExtJs HTML Component Click Event

Question

Я создал собственный компонент HTML в extJS, указав значение html панели. Я не могу прикрепить обработчики событий к элементу (или они как-то не запускаются). Тем не менее, я могу выполнять другие действия с компонентом, например скрывать, добавлять и т. Д.

Ext.select('#toFieldDiv').on('click',function() {
    alert("something");
});  //Doesn't Work

Ext.select('#toFieldDiv').hide('slow');  //Works

Есть идеи?

Вот мое определение компонента:

{
    xtype: 'panel',
    x: 70,
    y: 0,
    html: "<div id=\"toFieldDiv\" class=\"to-field\"> </div>"
}

Я даже пробовал то же самое с jQuery. Снова работает скрытие, но не щелчок.

Answer 1

Я нашел пример и объяснение , почему это не работает из коробки на форумах Sencha.Я реализовал предложенное решение ниже.

 Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    listeners: {render: function(c){c.el.on('click', function() { alert('onclick');});}},
    renderTo: Ext.getBody()
});

Answer 2

Мне наконец удалось решить проблему.Проблема была не в этой части кода (как я и предполагал).Событие должно работать и работает, потому что это обычное событие щелчка на элементе div.

Проблема заключалась в том, что на элемент div накладывалось другое текстовое поле, в результате чего события щелчка передавались в TextField вместо элемента div.

Answer 3

Для Extjs 3.3.1 вместо этого вы можете использовать Ext.getCmp ().

Здесь Ext.select () возвращает CompositeElementLite / CompositeElement, и эти компоненты не расширяются из Observable.Так что он не поддерживает связывание с on ().

Ext.getCmp () возвращает Ext.Component, так что он может.

Answer 4

Используете ли вы ExtJS 4?

Во-первых, вы пробовали "Ext.get" вместо "Ext.select"?

Если вы используете ExtJS 4, есть более простой способ.путь донг это на самом деле.4 позволяет вам устанавливать события на «el» виджетов.