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

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

Ответы

Ответ 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'
    });

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

Ответ 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();
});

Ответ 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);

Ответ 4

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

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