将侦听器分配给 xtemplate 中的不同 div - extjs 3.4

Question

我无法为从 XTemplate 生成的不同元素添加侦听器。

  var data = {
    users: [
        { id: 1, name: 'Ed Spencer' },
        { id: 2, name: 'Abe Elias'}
    ]
};

var store = new Ext.data.JsonStore({       
    autoLoad: true,
    data : data,
    root: 'users',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'}
    ]
});


var template = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="holder">',
            '<div class="notclicked">foobar</div>',
            '<div class="name">{name}</div>',
            '<div class="id">{id}</div>',
        '</div>',
    '</tpl>'
);



var newPanel = new Ext.Panel({

    title: "test",
    items: new Ext.DataView({
        store: store,
        tpl: template,
        itemSelector: 'div.holder',
        emptyText: 'No foo to display'
    })
});

newPanel.render('targetDiv');

我想做的是为“name”div 上的点击创建一个“click”侦听器，为“id”div 创建一个不同的侦听器。但到目前为止，我只能为谁“持有者”div 制作一个“点击”监听器。作为扩展，我希望 div 'notclicked'... 不响应点击。我一直在反对这一点。谁能给我一个正确的方向？

我使用的是 3.4。我在 jsfiddle 上放了一个小提琴：http://jsfiddle.net/tatagatha/7SfCf/6/

Answer 1

将'delegate'与紧密的选择器一起使用

http://www.sencha.com/blog/event-delegation-in-sencha-touch

看起来 3.4 还没有事件委托。 因此，您必须手动检查单击了哪个节点： 这是您选择工作的小提琴。 http://jsfiddle.net/dbrin/R29U5/

这在数据视图上进行：

     listeners: {
            click: {
                fn: this.onClick,
                scope: this
            }
        },
        onClick: function(event, item, options) {
            console.log(arguments);
            if (item.className === "id") {
                console.log("Id clicked: " + item.innerHTML);
                alert("ID clicked: " + item.innerHTML);
            }
        }