Event delegation in list

[tomalex0]

Hi,

Based on http://www.sencha.com/blog/2010/11/1...-sencha-touch/ i have tried to implement in a list

var list = new Ext.List({
    tpl: '<tpl for="."><li><img src="{avatar}" /><h1>{name}</h1></li></tpl>',
    listeners: {
        el: {
            tap: function(){
            },
            delegate: 'img'
        }
    }
});

If i use itemtap i could get details like

“itemtap”: function(list, index, item, e)

How could i get these value when i used event delegation technique in a list.
I just only want to make a particular tag selectable.

[tomalex0]

Hi could anyone tried event delegation in list,.

I used this to make it work anyway

listeners:{
				itemtap:function(list, index, item, e){
					var rec = list.store.data.get(index);
					var image = e.getTarget("img");
					if(image){
						alert("image clicked");
					}
				}
			}

[tomalex0]

Did anyone tried this.
Seems all are busy at conference


i used to try something like this before

"itemtap": function(list, index, item, e) {
			var imageclick = e.getTarget("img");
			var rec = list.store.data.get(index);
                         if(imageclick){
                            alert("Image clicked");
                          }
}

[senchauser2010]

I too have this question. In short it's how can I get equivalent of

“itemtap”: function(list, index, item, e)

using the event delegation model described here?

[lagentz]

did anybody find an elegant solution / answer to Thomas' question?

[tomalex0]

Did you tried

 e.getTarget("img");

[hitman01]

When adding listeners and handlers, is it better to attach something to body or el?
listeners: {
body: { // or el
delegate: ['div.mini_left img', 'div.mini_right img', 'div.mini_single img'],
tap: function(e, t){
// do something
}
}}

Also, whats the best way to handle capturing multiple events and assigning different delegates to them?
Currently I'm using the following solution but it has some performance problems.

// This has to capture a tap event application wide
panelObj.body.on({
tap: function(e, t) {
// do something
}});

// this has to capture double tap only on specific images
panelObj.body.on({
delegate: ['img.abc1', 'img.abc2'],
doubletap: function(e, t) {
// do something else
}});

[interfasys]

After having done some tests, there seems to be no noticeable improvements over 'onitemtap'.

[tolbahady]

I have done something like this:

var list = new Ext.List({
    tpl: '<tpl for="."><li><img id="{#}" src="{avatar}" /><h1>{name}</h1></li></tpl>',
    listeners: {
        el: {
            tap: function(item){
                  var index = item.target.id-1;
                  console.log("index is: "+index);
            },
            delegate: 'img'
        }
    }
});

Once you get the index you can use the store to get the data

[interfasys]

@tolbahady
Just watch out. Your argument isn't an item, it's an EventObject.