View Full Version : Event Delegation in custom html element into xtemplate

3 Jul 2012, 9:19 AM
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?


6 Jul 2012, 1:59 PM
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() {

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.

6 Jul 2012, 2:11 PM
Thank you Mitchell it solved my problem

12 Aug 2013, 3:45 PM
Is there any way to get this kind of interaction from ExtJs 3.3.3 or older? I don't think I can use this method since the delegate feature is only available from 3.4.0 and above.

12 Aug 2013, 7:49 PM
You'd need to modify it slightly since components don't support element listeners in that format, but event delegation is available and has been for quite a while:

view.el.on('click', function() {
}, null, {delegate: '.foo});

13 Aug 2013, 12:00 AM
Hi Evant,

I still can't seem to get it to recognize certain clicks.

I am using a ComboBox implementation with a custom template as followed;

var listValueTpl =
'<div class="testdiv1">' + '{[escapeHTML(values.alias)]}' +
'<span class="testclick1" style="color: #aaaaaa;font-size: 0.9em;"> ........ </span>' +

var dropDown = new packagename.SimpleDropDown( {
fields : [ ...],
listValues : listValues,
tpl : listValueTpl,
cls : ...
listeners : {
select : function(combo, record, index) {
console.log("selected item #" + index);

dropDown.el.on('click', function() {
console.log("click on span!");
}, null, {delegate: 'span.testclick1'});
dropDown.el.on('click', function() {
console.log("click on div!");
}, null, {delegate: '.testdiv1'});

Here, I am only able to log the select listener console logs, both div and span are not triggering their own onclick. Did I miss something?

Thanks for your help!!

13 Aug 2013, 9:39 AM
Seems like in this post, the listener had to be attached to a listconfig (perhaps since it is a ComboBox and not a panel?) :-?
Sorry if some of this is obvious, I am new to ext