Event Delegates for Multiple Elements in a List Row

[jeffbvox]

In the Blog post at http://www.sencha.com/blog/event-delegation-in-sencha-touch/, Tommy M says that it's possible to have multiple delegates in the same list row in the comments, but I can't seem to make it work. Has anyone had any luck with it.

I have two images with different classes applied in the same list row, and I want to fire two different event handlers. Tried a variety of methods, but the example that's in @gcallaghan's post didn't seem to work. It seems only the last one specified will work (I'm guessing it overwrites the first).

Here is what I tried (among other things):


itemList = Ext.extend(Ext.List, {
itemTpl: new Ext.XTemplate(
'<img src="public/resources/images/buttons/PlayButton33X33.png" height="33" width="33" align="absmiddle" class="playButton"/>',
'{Name}',
'<img src="public/resources/images/buttons/AddToCart50x50_grey.gif" height="25" width="25" class="addToCartButton"/>',
),
listeners: {
el: {
tap: function() {
alert('Play Pressed!')
},
delegate: '.playButton'

},
el: {
tap: function() {
alert('Add Track To Cart pressed!')
},
delegate: '.addToCartButton'
}
},
initComponent: function() {
itemList t.superclass.initComponent.apply(this, arguments);
//this.enableBubble('selectionchange');
}
});

[evant]

You're going about it the hard way:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Person', {
fields: ['first', 'last']
});

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: {
xtype: 'list',
store: new Ext.data.Store({
model: 'Person',
data: [{
first: 'aaaaa',
last: 'bbbbb'
},{
first: 'ccccc',
last: 'ddddd'
}]
}),
itemTpl: '<span class="foo">{first}</span> <span class="bar">{last}</span>',
listeners: {
itemtap: function(list, index, el, event){
if (event.getTarget('.foo')) {
console.log('left');
} else if (event.getTarget('.bar')) {
console.log('right');
} else {
console.log('neither');
}
}
}
}
});
}
});

[jeffbvox]

I guess I was attempting to do it the hard way. This looks much nicer than the hack/workaround that I had, though what I had was pretty close!

BTW, I tried posting a comment to the original blog article, but I received the error: "Your Low NoSpam service's API key appears to be invalid." when I submitted the comment.

[slmd]

Thx! I've been looking for this a looooong time ;)

[m4manas]

If we got a list of say 25 elements do we need 25 if statement or there is any elegant way.

[jeffbvox]

it's per class that you want to switch logic on. If there are 25 different elements that you can take distinct actions on, then yes.