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

[lee7ster]

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]

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]

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]

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

Sorry if some of this is obvious, I am new to ext