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“未被点击”......不回应点击。我一直在反对这一点。任何人都可以给我一个正确的方向吗？

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

Answer 1

使用紧密选择器'委托'

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);
            }
        }

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

1 个答案: