PDA

View Full Version : toolbar menus auto dropdown on mouse hover in extjs 4



theraaaz
26 Jun 2013, 12:32 AM
Question is quite simple..
When we create buttons in top toolbar with menu items, when we click button, it displays menu, but how to make it auto drop down on mouse hover using extjs?

suzuki1100nz
26 Jun 2013, 12:43 AM
Have a look at - http://docs.sencha.com/extjs/4.1.3/#!/example/menu/menus.html
(http://docs.sencha.com/extjs/4.1.3/#!/example/menu/menus.html)Sub-menus display on hover by default

theraaaz
27 Jun 2013, 12:43 AM
But in the example, we have to click the button to view menu. It is not auto dropdown. I know submenu display on hover, but not the button containing the menu.

suzuki1100nz
27 Jun 2013, 1:38 AM
ok so add a mouse over listener to the toolbar buttons and ion the handler invoke the onClick function of the button.

slemmon
27 Jun 2013, 2:03 PM
You can do something like this:


Ext.create('Ext.Button', {
text : 'Menu button',
renderTo : Ext.getBody(),
arrowAlign: 'bottom',
menu : [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'}
],
listeners: {
mouseover: function () {
this.showMenu();
}
}
});

ZhengYueChuan
27 Jun 2013, 10:43 PM
so so

suzuki1100nz
27 Jun 2013, 10:55 PM
ZhengYueChuan what do you mean by "so so"?

theraaaz
28 Jun 2013, 2:07 AM
I'm doing something like this:

listeners: {
mouseover: {
fn: function (b) {
b.showMenu();
}
},
mouseout: {
fn: function (b) {
this.hideTaskFn();
},
scope: this
}
}

This was working fine in Ext 3.4, but now when I'm using it in Ext 4.2, on mouseOver, the menu displays, but when I try to goto menu, it hides. If i don't use mouseOut, then I have to click somewhere on page to hide the menu.
I want something just like here on this site. Here on sencha site, when we hover mouse on "Products" or "Support", it drop downs a menu and when mouse is out from the menu, it vanishes..

slemmon
28 Jun 2013, 2:52 PM
I suspect you'll want to set up monitorMouseLeave (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-monitorMouseLeave) on the el for the button (and its menu?) and in the handler defined in monitorMouseLeave you'll need to check to see if the cursor is over the button / menu and if not then close the menu.

theraaaz
30 Jun 2013, 9:25 PM
@slemmon I checked monitorMouseLeave, and i think it will work. Will you please provide a small code example for toolbar button control??

theraaaz
1 Jul 2013, 2:49 AM
Thanks @slemmon, I solved the problem using your suggested monitorMouseLeave (http://docs.sencha.com/extjs/4.2.1/#%21/api/Ext.dom.Element-method-monitorMouseLeave).
Here is the code for others if someone else is also struggling for this..

{
xtype : 'button',
text : 'My Button',
listeners : {
mouseover : function() {
console.log('inside mouse over');
this.showMenu();
},
menushow : function() {
console.log('menu shown');
this.mouseLeaveMonitor = this.menu.el
.monitorMouseLeave(100, this.hideMenu, this);
},
destroy : function(combo) {
combo.menu.el.un(combo.mouseLeaveMonitor);
}
},
id : 'mBtn',
menu : {
xtype : 'menu',
id : 'mMenu',
items : [{
text : 'menu item1'
}, {
text : 'menu item2'
}]
}
}

DevinLi
7 Jul 2014, 7:28 PM
well done!
It`s work, Thanks!