Listeners and el

As per the Ext documentation: "While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to."

by Walter Rumsby

JavaScript

Ext.widget({
    xtype: 'component',
    renderTo: Ext.getBody(),
    autoEl: 'button',
    tpl: '{text:htmlEncode}',
    text: 'Click Me',
    
    onRender: function () {
        var cmp = this;
        var el = cmp.el;
        var tpl;
        
        if (typeof cmp.tpl === 'string') {
            cmp.tpl = new Ext.XTemplate(cmp.tpl);
        }
        
        tpl = cmp.tpl;
        
        el.setHTML(tpl.apply(cmp));
    },
    
    listeners: {
        click: {
            element: 'el',
            fn: function () {
                console.log('click', arguments);
            }
        }
    }
});