PDA

View Full Version : what event/method is fired/called when button loses focus?



shahdollie
10 Mar 2011, 4:31 PM
Hi everyone,


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.


Regards

walldorff
11 Mar 2011, 3:54 PM
When I click anywhere other than the button or menu items then the menu closes.

So it's not an onBlur event you're looking for, but an onClick event. Studying the code of Ext.menu.Menu and Ext.menu.Item will help you on your way.

shahdollie
14 Mar 2011, 2:13 PM
hi thanks for replying.

I have a button with a menu and i close it on some condition and when i dont want to close it i return false from beforehide listener of menu. But I want to do like if somebody clicks "outside" button and menu then always close the menu.

I know this is the default behaviour so what i am looking for is where this behaviour is defined.

Hope somebody can help.
Regards

mankz
14 Mar 2011, 2:36 PM
I think you're looking for this:



Ext.menu.MenuMgr = function(){
var menus, active, groups = {}, attached = false, lastShow = new Date();

// private - called when first menu is created
function init(){
menus = {};
active = new Ext.util.MixedCollection();
Ext.getDoc().addKeyListener(27, function(){
if(active.length > 0){
hideAll();
}
});
}

// private
function hideAll(){
if(active && active.length > 0){
var c = active.clone();
c.each(function(m){
m.hide();
});
return true;
}
return false;
}

// private
function onHide(m){
active.remove(m);
if(active.length < 1){
Ext.getDoc().un("mousedown", onMouseDown);
attached = false;
}
}

// private
function onShow(m){
var last = active.last();
lastShow = new Date();
active.add(m);
if(!attached){
Ext.getDoc().on("mousedown", onMouseDown);
attached = true;
}
if(m.parentMenu){
m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
m.parentMenu.activeChild = m;
}else if(last && !last.isDestroyed && last.isVisible()){
m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
}
}

// private
function onBeforeHide(m){
if(m.activeChild){
m.activeChild.hide();
}
if(m.autoHideTimer){
clearTimeout(m.autoHideTimer);
delete m.autoHideTimer;
}
}

// private
function onBeforeShow(m){
var pm = m.parentMenu;
if(!pm && !m.allowOtherMenus){
hideAll();
}else if(pm && pm.activeChild){
pm.activeChild.hide();
}
}

// private
function onMouseDown(e){
if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
hideAll();
}
}

return {

/**
* Hides all menus that are currently visible
* @return {Boolean} success True if any active menus were hidden.
*/
hideAll : function(){
return hideAll();
},

// private
register : function(menu){
if(!menus){
init();
}
menus[menu.id] = menu;
menu.on({
beforehide: onBeforeHide,
hide: onHide,
beforeshow: onBeforeShow,
show: onShow
});
},

/**
* Returns a {@link Ext.menu.Menu} object
* @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
* be used to generate and return a new Menu instance.
* @return {Ext.menu.Menu} The specified menu, or null if none are found
*/
get : function(menu){
if(typeof menu == "string"){ // menu id
if(!menus){ // not initialized, no menus to return
return null;
}
return menus[menu];
}else if(menu.events){ // menu instance
return menu;
}else if(typeof menu.length == 'number'){ // array of menu items?
return new Ext.menu.Menu({items:menu});
}else{ // otherwise, must be a config
return Ext.create(menu, 'menu');
}
},

// private
unregister : function(menu){
delete menus[menu.id];
menu.un("beforehide", onBeforeHide);
menu.un("hide", onHide);
menu.un("beforeshow", onBeforeShow);
menu.un("show", onShow);
},

// private
registerCheckable : function(menuItem){
var g = menuItem.group;
if(g){
if(!groups[g]){
groups[g] = [];
}
groups[g].push(menuItem);
}
},

// private
unregisterCheckable : function(menuItem){
var g = menuItem.group;
if(g){
groups[g].remove(menuItem);
}
},

// private
onCheckChange: function(item, state){
if(item.group && state){
var group = groups[item.group],
i = 0,
len = group.length,
current;

for(; i < len; i++){
current = group[i];
if(current != item){
current.setChecked(false);
}
}
}
},

getCheckedItem : function(groupId){
var g = groups[groupId];
if(g){
for(var i = 0, l = g.length; i < l; i++){
if(g[i].checked){
return g[i];
}
}
}
return null;
},

setCheckedItem : function(groupId, itemId){
var g = groups[groupId];
if(g){
for(var i = 0, l = g.length; i < l; i++){
if(g[i].id == itemId){
g[i].setChecked(true);
}
}
}
return null;
}
};
}();

shahdollie
14 Mar 2011, 3:22 PM
hi thanks a lot.... this is exactly what i was looking for.

Could u tell me how to override just onMouseDown() function? I only know the way to do it is by redefining the whole Ext.menu.MenuMgr function.

Regards

mankz
14 Mar 2011, 10:03 PM
That's what you'll have to do, it's not written in a way that allows you to simply override it.