PDA

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



geniodella
3 Jul 2012, 9:19 AM
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
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() {
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
6 Jul 2012, 2:11 PM
Thank you Mitchell it solved my problem

lee7ster
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.

evant
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});

lee7ster
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>' +
'</div>'
...;

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!!

lee7ster
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?) :-?
http://www.sencha.com/forum/showthread.php?158991-ComboBox-custom-template-how-do-I-attach-a-click-handler
(http://www.sencha.com/forum/showthread.php?158991-ComboBox-custom-template-how-do-I-attach-a-click-handler)
Sorry if some of this is obvious, I am new to ext