Ext JS: Правильная техника для добавления слушателей в DOM, созданный с помощью XTemplate?

Question

Мы используем XTemplates - много XTemplates. Они отлично подходят для отображения контента только для чтения. Но вы когда-нибудь добавляли (Ext JS) слушателей к DOM, созданному с помощью шаблона? Не могли бы вы поделиться предпочитаемой техникой создания этих слушателей?

Answer 1

Мой предпочтительный метод - использовать аналог функции $.live из jquery. F.I. давайте предположим, что вы собираетесь использовать xtemplate для создания простого списка, как показано ниже:

<ul class="nav">
    <li><a href="example.com">item1</a></li>
    <!-- ... -->
</ul>

Чтобы назначить обработчик якорям, вы должны сделать в jquery что-то вроде:

$('.nav a').live('click', function(){
    // do something on anchor click
});

Функция $.live великолепна, потому что она будет работать, даже если назначение обработчика произойдет до отображения списка. Этот факт чрезвычайно важен при использовании xtemplate.

К счастью, в ExtJs есть аналог - делегирование событий. Просто посмотрите на код:

Ext.getBody().on('click', function(event, target){
        // do something on anchor click
    }, null, {
        delegate: '.nav a'
    });

Для получения дополнительной информации посмотрите документы для Ext.Element.addListener метода.

Answer 2

Бесстыдно измененная версия концепции MolecularMan:

Ext.live = function (selector, event, handler) {
    Ext.getBody().on(event, function(event, target){
        handler.apply(Ext.get(target), arguments);
    }, null, {
        delegate: selector
    });
};

Использование:

Ext.live('.myclass', 'click', function () {
    this.fadeOut();
});

Answer 3

Самый простой подход, который мы здесь применяем, следующий:

// Function to be called on DOM event
var functionCallback = function () {
    console.log('hello');
}

// function to bind elements created via XTemplate and DOM events
function bind(Ext.Element element, String selector, Obj callback) {
    var els = element.query(selector);

    Ext.Array.each(els, function (item, index, allItems) {
        item.addEventListener('click', callback, false);
    });
}

И использование:

var tpl = new Ext.XTemplate(...);
var data = [..]

var returnedEl = tpl.append(otherElem, data, true);
bind(returnedEl, 'div.my-css-class', functionCallback);

Answer 4

Ну, вы можете использовать что-то вроде этого:

1. создать идентификатор с помощью Ext.id (), передать его в шаблон некоторому элементу
2. затем извлеките этот элемент, используя Ext.get ()
3. присоединить слушателя к только что найденному элементу