How to give Handler or on click event in anchor tag

Question

I am using box component and want to give handler to anchor tag. Can anyone suggest me to get that. In doc not getting handler for box component

My code ;

{   
      xtype: 'box',
      autoEl: {tag: 'a', href: '#', children: [{tag: 'div', html: 'Value'}]},
    },

I want onclick either on box or a tag.

Answer 1

Yes indeed, the box component does not have a click event, so you need to place the listener on the element, like so:

xtype: 'box',
autoEl: {tag: 'a', href: '#', children: [{tag: 'div', html: 'Value'}]},
listeners: {
    element: 'el',
    click: function() {
        alert('click');
    }
}

From the API docs :

While some Ext JS Component classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the Ext.view.View'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.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/279k