How do you attach click events to ExtJS template elements?

Question

How would I add a click event to each link tag in this other than by building in onclick=.... into the XTemplate?

new Ext.XTemplate(
    '<ul>',
    '<tpl for="."><li><a href="#{anchor}">{text}</a></li></tpl>',
    '</ul>'
).overwrite('someElement', [
    { text: 'Click me', anchor: '1' },
    { text: 'No, click me', anchor: '2'}
]);

Answer 1

The short answer is, you don't. Instead, you should use event delegation:

Ext.get('someElement').on('click', function(event, target) {
    console.log(target);
}, null, {delegate: 'a'});

This has 2 main advantages:

1. You only need to bind a single listener
2. It will work as you dynamically modify the content