I want to know what event/method is fired/called when a button loses focus/blurs in extjs.
I have a button with a menu. When I click anywhere other than the button or menu items then the menu closes. So what I want to know is what calls menu.hide() method so that menu hides.
Does anyone have any idea about this? I tried onBlur for button but it is not fired.
/**
* Try to focus this component.
* @param {Boolean} selectText (optional) If applicable, true to also select the text in this component
* @param {Boolean/Number} delay (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
* @return {Ext.Component} this
*/
focus : function(selectText, delay){
if(delay){
this.focusTask = new Ext.util.DelayedTask(this.focus, this, [selectText, false]);
this.focusTask.delay(Ext.isNumber(delay) ? delay : 10);
return this;
}
if(this.rendered && !this.isDestroyed){
this.el.focus();
if(selectText === true){
this.el.dom.select();
}
}
return this;
},
// private
blur : function(){
if(this.rendered){
this.el.blur();
}
return this;
},
Interesting. Apparently ExtJS does not raise any event when a Component get the focus nor when it lose it. Probably it deserves an override.
ExtJS Button has an event named menuhide for this exact purpose. It is fired when the menu attached to a button (assuming there is one) is hidden. The event is called with arguments (Button this, Menu menu).
See ExtJS API documentation for more details - button events menushow, menutriggerout, menutriggerover, and mouseout might also prove useful.
