PDA

View Full Version : Event Delegates for Multiple Elements in a List Row



jeffbvox
6 Feb 2011, 12:07 PM
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
6 Feb 2011, 2:23 PM
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
7 Feb 2011, 2:52 AM
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
7 Oct 2011, 2:55 AM
Thx! I've been looking for this a looooong time ;)

m4manas
25 Jan 2012, 8:21 AM
If we got a list of say 25 elements do we need 25 if statement or there is any elegant way.

jeffbvox
25 Jan 2012, 11:53 AM
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.