Assigning listeners to different divs inside a xtemplate - extjs 3.4

Question

I am having trouble adding a listener to different elements generated from an 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');

What I would like do is make a 'click' listener for clicks on the "name" div and a different one for the "id" div. But so far I can only make a 'click' listener for the who "holder" div. As an extention, I'd like the div 'notclicked'... to not respond to clicks. I've been racking against this a while. Can anyone give me a push in the right direction?

I'm using 3.4. I've put a fiddle on jsfiddle: http://jsfiddle.net/tatagatha/7SfCf/6/

Answer 1

use 'delegate' with a tight selector

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

Well looks like 3.4 had no delegation of events yet. So you would have to manually check which node was clicked: here is your fiddle back with selction working. http://jsfiddle.net/dbrin/R29U5/

This goes on dataview:

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