2013-06-17 2 views
1

У меня есть окно и внутри него панель. Панель содержит текст (базовый html). После того, как окно будет готово, я вызываю следующую функцию, которая находит элементы с определенным классом, и регистрирует нажатием событий на них. Это работает сначала.Регистрация событий работает только в первый раз

После закрытия окна и воссоздания аналогичного окна 1: 1 события не срабатывают. То же самое происходит, если я обновляю() панель и снова запускаю свою функцию - события не срабатывают. Почему это?

Я все еще вижу элементы, которые можно найти, и, видимо, некоторые события должны быть зарегистрированы, но мои клики не могут быть захвачены кодом отладки или функцией приема больше.

addEvents: function(win) { 
    // The Window 
    var ow = win; 

    // Using this debug trick I can see that on the second time the events wont fire 
    // -- nothing gets printed to console 
    Ext.util.Observable.capture(ow, function(){ 
     console.log(arguments); 
    }); 

    // Will search for elements, finds elements that have class myclass 
    // In my case the elements are just ordinary html tags in the visible content 
    // area of the panel. 
    var elems = ow.down('panel').getEl().select(".myclass").elements; 

    Ext.Array.forEach(elems, function (item, index, allItems) { 
     // We need Ext DOM element to be able to attach stuff to it 
     var elem = new Ext.dom.Element(item); 
     elem.on ('click', function (evt, el, o) { 
      ow.fireEvent('myevent', ow, elem); 
     }); 
    }); 
} 

Я подозревал, что в первом, что у меня есть на самом деле отменить предыдущие события и уничтожить окно, поэтому я попытался добавить это к близко окна:

window.down('panel').destroy(); 
    window.destroy(); 

Однако, кажется, я есть какая-то другая проблема, которую я действительно не могу понять.

ответ

1

Это очень удобный способ добавления событий в JQuery-ish. Вы имеете дело с компонентами и должны добавлять слушателей событий на компоненты. Если вам нужно делегировать события до элементов html, вам нужно установить один прослушиватель событий на компоненте, инкапсулирующем элементы, и добавить конфигурацию делегата в фактические элементы html.

Вот некоторые ресурсы: делегация Explain ExtJS 4 event handling

Событие объяснил: http://www.sencha.com/blog/event-delegation-in-sencha-touch (относится к ExtJS так же хорошо)

Больше на радиослушателей с ExtJS: https://stackoverflow.com/a/8733338/834424

+0

Это очень интересно. Я вижу, что метод делегирования работает правильно, и я также вижу, что в любом случае это лучше. Тем не менее, не могли бы вы объяснить, почему (как мне пять), что именно сломало мое первоначальное решение? – user918176

+0

Сложно сказать, что код кажется ОК. Там могут быть проблемы с обложками Ext DOM, кэшированными фрагментами HTML и т. Д. Что вы можете сделать, так это в firebug правой кнопкой мыши по элементу html (внутри вкладки HTML) и выбрать параметр «События журнала». Посмотрите, активирует ли там браузер. – dbrin

Смежные вопросы