View Full Version : drop down menu

Tewodros Wondimu
26 Oct 2010, 7:50 AM
Hey everyone, i need some help building a toolbar with a dropdown menu that does so when hovered on. It would be awesome if someone could help soon, project deadline is a coming... Thankshttp://www.sencha.com/forum/images/smilies/15.gif

26 Oct 2010, 12:27 PM
Do you mean a button in a toolbar that shows its menu when mouseovered?

Tewodros Wondimu
26 Oct 2010, 9:27 PM
Yes, Animal that is exactly what i wanted.

26 Oct 2010, 9:44 PM

myButton.el.on('mouseenter', function(e) {

But remember that myButton must have rendered to have el.

Tewodros Wondimu
28 Oct 2010, 9:50 AM
So, i was working on a way to make the button show its menu when hovered on, but i couldn't work it out using the toolbar and i hadn't seen the reply that Animal had given, (by the way thank you so much for you instant reply), and i figured the i would just use a button alone, not one in a toolbar. So what i basically did is created a button and and got it to show the menu when hovered on and hide the menu when the mouse left the button. It worked. When using the code below please add a div tag with the id="somediv" where the button will be rendered to.

var m = new Ext.Button({
renderTo: Ext.fly('somediv'),
xtype: 'tbbutton',
text: 'The button',
menu: [{
text: 'Menu item one',
text: 'Menu item two'

m.on('mouseover', function(){

m.on('mouseout', function(){

28 Oct 2010, 1:28 PM
A button in a toolbar is still a button.

It seems weird to have a different button somewhere which when you hover it, shows the menu of a toolbar button! Add the listener to the toolbar button.