Event Delegation in custom html element into xtemplate

[geniodella]

Hi,
i read some posts related to listening to events triggered by
html elements created in xtemplate blocks using event delegation but
they were all related to sencha touch, is it possible to do something
like this even in extjs 4?

Thanks

[mitchellsimoens]

The same concept can be used for Ext JS


new Ext.panel.Panel({
renderTo : document.body,
width : 400,
height : 400,
title : 'Event Delegation Test',
tpl : '<tpl for="."><div><span class="foo-div">{foo}</span> {bar}</div></tpl>',
data : [
{ foo : 'One', bar : 'one' },
{ foo : 'Two', bar : 'two' },
{ foo : 'Three', bar : 'three' }
],
listeners : {
element : 'el',
delegate : 'span.foo-div',
click : function() {
console.log('click');
}
}
});

If you run this code, you will only get a click in the console if you click on the left number but if you click on the ones on the right (lowercase ones) it will not be listened to.

[geniodella]

Thank you Mitchell it solved my problem