PDA

View Full Version : Detecting a click in elements of a button



miroperez
6 Feb 2012, 5:23 PM
I'm trying to detect a click in a sub element of a button and I wasn't sure how to do this. For example, button has a this.btnIconEl element defined based on it's default renderTpl. I want to be able to detect that the user clicked on this element instead of the button itself.

Eventually I will extend the button or override the renderTpl to target some other element but I want the general functionality of the button.

I thought I could just do something like:



{
xtype: 'button',
text: 'My button',
iconCls: 'someIcon',
listeners: {
'afterrender' : function(btn)
{
btn.btnIconEl.on('click', function(){alert('got here')})
}
}
}


but the target of the click always seems to be the button itself.

debabrata
6 Feb 2012, 9:35 PM
Here is a solution



Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
listeners: {
el: {
click: function() {
alert('You clicked the button!')
}
}
}
});

miroperez
7 Feb 2012, 6:48 AM
I need to detect a click for a specific element inside the button. For example, the btnIconEl which is accessible from the this.btnIconEl prop after it's rendered.

Out of curiosity how does the code you show work? You're asking for a listener on 'el' ? I thought listeners are the ones listed in the events section of the docs?

Thanks,
Miro