How do I add elements to an ExtJS component tpl so that I can refer to them in a listeners config

Question

I can add a listener to the 'el' element of a component like this:

Ext.widget('component',{
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the component
            fn: function(){ console.log('you clicked the el'); }
        }
    }
}

But I want to add more elements to this component's tpl and listen for clicks on them. In place of 'el' in the example above, I want to use a custom element 'awesomelink'. How do I reference elements in the tpl from the listeners config?

Here's an unfinished example:

Ext.widget('component',{
    tpl : '<div>{content}<a class="awesomelink">click this awesome link</a></div>',
    data:{content:'something'},
    listeners: {
        click: {
            element: 'awesomelink', // this doesn't mean anything 
            fn: function(){ console.log('you clicked the awesomelink'); }
        }
    }
}

I assume I need an awesomelink property on the component - but how would that relate to the tpl?

Answer 1

Use event delegation:

listeners: {
    afterrender: function(c) {
        c.getEl().on('click', function(e, t) {
            console.log(t);
        }, null, {delegate: '.awesomelink'});
    }
}