PDA

View Full Version : toolbar menu open on hover



mohaaron
30 May 2009, 5:45 PM
Can anyone tell me how to make the menu open when the mouse is hovered over it. I want it to open like the menu items Products and Support on the extjs.com website.

Here is what I'm using now which does not work. This only open the menu on click.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content goes here</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var tb = new Ext.Toolbar({
text: 'toolbar',
renderTo: 'toolbar',
items:
[{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}
});
</script>
</head>

<body>

<div id="toolbar" />

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>

Animal
31 May 2009, 12:29 AM
In Ext 3.0, menus can be regular Components rendered somewhere, and non-floating.

So use a Menu instead of a Toolbar.

Drop the following code into examples/menu:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Application Menubar with Menus</title>

<!-- Ext Files -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var tb = new Ext.menu.Menu({
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
renderTo: 'toolbar',
items:
[{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}
});
</script>
</head>
<body>
<div id="toolbar" />
</body>
</html>


You will also need to put the following image there (See embedded CSS)

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/horizontal-menu-parent.gif

mohaaron
1 Jun 2009, 8:24 AM
Thanks for the reply. The code you gave me did help me get a menu rendered and the menu items work on mouse over now. I have a couple of questions. Why doesn't the mouse over work with the code that I was using originally and what is the difference between using the menu by itself and within a toolbar?

Thanks

Animal
1 Jun 2009, 9:37 AM
Have you understood what's going on?

I use a Menu instead of a toolbar.

mohaaron
1 Jun 2009, 2:10 PM
What I don't understand is why the menu hover does not work when the menu is in the toolbar but the menu hover does work when it's not in the toolbar. What is the toolbar doing that causes the hover to not work.

I was also asking what the purpose of the toolbar is for in comparison to the menu.

mohaaron
1 Jun 2009, 3:09 PM
After reading some more I get the feeling that the menu only works in a vertical fashion. So each menu item for menu gets stacked top to bottom. This makes sense to me for a menu. My question now is how does the extjs.com web site menu work? I want to have a menu bar with links / link items and then have a hover drop down menu on each link item. How can this be accomplished?

Animal
1 Jun 2009, 11:08 PM
Hover activates a Men item. It does not activate a Toolbar Button.

Have you READ anything? That example I gave you uses a MENU layed out horizontally instead of a Toolbar. Which (as explained above) is why it works.

mohaaron
2 Jun 2009, 8:18 AM
Good Morning Animal,

I am very new to extjs so please bare with me. I tried your example at home and it did produce the effect of a horizontal menu. I don't know why but now here at work I am trying the same thing and the menu seems to be getting crammed to the left of the screen and the two menu items are on top of each other instead of across.

I did have one question about the html you gave me. Where does this css file come from? Does it live in the examples directory and could my missing this file be the reason why the menu is not horizontal?
<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />

mohaaron
2 Jun 2009, 10:09 AM
Animal,

I just fixed the version of the menu that I had at work. There was some code that was different.

I now have a new problem. Clicking an item in the menu causes the whole menu to disappear from the screen. Do you know why this is happening?

mohaaron
2 Jun 2009, 10:42 AM
I don't know what's going on but now the menu is not being displayed correctly again. The exact same file that works on my home workstation now doesn't dispaly properly at work. I just had it working at work and now it doesn't again. What's going on?

mohaaron
2 Jun 2009, 10:54 AM
Well, just for clarity sake here is the code and a screen shot of the result that I get.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Application Menubar with Menus</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

<!-- Ext Files -->
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/ext-all-debug.js"></script>

<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(../Images/horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var tb = new Ext.menu.Menu({
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
renderTo: 'toolbar',
items: [{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}
});
</script>
</head>

<body>

<div id="toolbar" />

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>
Attached are two images, one that is from work which is the code not working, and the other is from home where it is working. Now what is the difference?

mohaaron
3 Jun 2009, 9:09 AM
Good Morning,

I finally figured out why I was seeing the menu look correct in one place and not another. Animal, the menu code that you gave me is working in Firefox but not IE. Do you know why this is happening? I don't understand this code well enough to know why it works in one browser and not another. Attached is the screen shot of the menu in the two browsers so you can see what's happening.

Animal
3 Jun 2009, 11:27 AM
There's a bug in the Menu class.

You need this override:



Ext.override(Ext.menu.Menu, {
onLayout: function(){
if(this.isVisible()){
if(this.enableScrolling){
this.constrainScroll(this.el.getTop());
}
if(Ext.isIE){
this.layout.doAutoSize();
}
if (this.floating) {
this.el.sync();
}
}
}
});



I will report it, and it should be fixed in 2.0 GA.

mohaaron
3 Jun 2009, 12:27 PM
Thanks Animal,

I don't know how overriding is supposed to work but I tried the following code and it hasn't changed anything. The menu still shows the same as before. Is there a specific way in which the override works that I need to follow?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Application Menubar with Menus</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

<!-- Ext Files -->
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/ext-all-debug.js"></script>

<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(../Images/horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {

Ext.override(Ext.menu.Menu, {
onLayout: function() {
if (this.isVisible()) {
if (this.enableScrolling) {
this.constrainScroll(this.el.getTop());
}
if (Ext.isIE) {
this.layout.doAutoSize();
}
if (this.floating) {
this.el.sync();
}
}
}
});

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var tb = new Ext.menu.Menu({
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
renderTo: 'toolbar',
items: [{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}
});
</script>
</head>

<body>

<div id="toolbar" />

</body>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
</HEAD>
</html>

Animal
3 Jun 2009, 12:43 PM
Works for me:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/works4me.jpg

mohaaron
3 Jun 2009, 1:15 PM
I'm currently developing for IE 6+. Could it be that IE 6 doesn't work? I just tried it on IE 7 and it worked. It must be IE 6 that's not working.

Animal
3 Jun 2009, 1:18 PM
You're going to have to hack it.

mohaaron
18 Jun 2009, 12:25 PM
Hello Animal,

It's been a little while since I've worked on this problem and want to get back to it. Thank you for the help so far. I have one question regarding this problem now. How and why does the menu at the top of the Ext JS web site work the way it does. When hovering over either Products or Support there is a drop down menu of additional options. This is exactly what I'm trying to reproduce. Can you tell me how this is accomplished?

Animal
18 Jun 2009, 9:49 PM
Using javascript programming skills to attach listeners to DOM elements and display absolutely positioned elements in response to mouseover events.

mohaaron
19 Jun 2009, 8:24 AM
Hello Animal,

Thanks for the reply. It sounds like your answer means this was accomplished using something custom as opposed to using a ui widget. It's good to know what's required for the problem. I'll start working on it.

Animal
19 Jun 2009, 10:41 PM
Why can't you just make the solution I gave you work instead of inventing your own wonky wheel?

mohaaron
20 Jun 2009, 1:08 PM
Hello Animal,

Well, that's a good question. I guess because I'm a lazy programmer and looking for the easiest way to solve my problem. I was thinking that if the solution to what I wanted was already being used on the Ext Js website then it would be relatively easy to make it work for me. The solution you gave me did do what I wanted but didn't it across browsers which means that I then have to figure out and solve this problem. Being new to Ext am hesitant to try and make your solution work, although as I say this I am of course thinking that it would be good practice for me.

I hope that answers your question. Thanks for asking it though because it does push me to try.

Have a great weekend.

Animal
20 Jun 2009, 9:35 PM
Pff! You think you can reverse-engineer an undocumented menu from off the Ext site and integrate it into an Ext application quicker than tweaking a little browser compatibility feature in a full solution then?

Well, it's your time.

AgentSmith
29 Oct 2009, 8:01 AM
How do you prevent the menu from disappearing after you click on a menu item?

Thanks,
AS



In Ext 3.0, menus can be regular Components rendered somewhere, and non-floating.

So use a Menu instead of a Toolbar.

Drop the following code into examples/menu:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Application Menubar with Menus</title>

<!-- Ext Files -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var tb = new Ext.menu.Menu({
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
renderTo: 'toolbar',
items:
[{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}
});
</script>
</head>
<body>
<div id="toolbar" />
</body>
</html>
You will also need to put the following image there (See embedded CSS)

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/horizontal-menu-parent.gif

xiaomena
15 Apr 2010, 7:12 AM
Do you have a fix for IE6? I am using ExtJS 3.2.0. Thanks
19928

twisted_pear
6 Jul 2011, 3:23 PM
I had this same problem, so I cooked up this extension of Ext.Button called Ext.HoverButton. No need to change your menu's or toolbars, just switch the xtype of the buttons to hoverButton. Enjoy!

Ext.HoverButton extension (http://www.lustforge.com/2011/07/06/open-extjs-menu-on-mouseover/)