PDA

View Full Version : Using the Toolbar as a menu



Animal
1 Mar 2007, 4:12 AM
I have ditched YAHOO's menu to use Ext's Toolbar with menu buttons.

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

Menus are quirky things, and there are scores of subtle differences in approach that people use: Hide on mouseout, hide on click out, timers to time mouseout times. Popping up on mouseover or click etc etc ...

So I know it's a difficult area to cover all bases.

What I'd like to have (Maybe it's possible, and I haven't looked hard enough) is, once you've "activated" the menu Toolbar by expanding one of the menus, that when you mouseover a neighboring menu (as you can see in the screenshot, I've clicked "Static Data", and I've moused over "Application Data") the original menu disappears, and the mouseovered one appears.

In the screenshot, now the pointer (Print screen doesn't capture it) is over "Application Data" (both buttons are highlighted), I'd like that menu to be shown, and "Static Data" to be hidden.

Also, I have to actually click on the downarrow section of the button. If the button doesn't have a handler, it's just a menu button and clicking anywhere should pop up its menu.

Here's a test page which will drop into the examples/menu directory. When I mouseover the buttons the downarrows drop down by a few pixels....??



<!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>Toolbar with Menus</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
YAHOO.util.Event.onAvailable("aspicio-menu-bar", function() {
aspicioMenuBar = new Ext.Toolbar(Ext.get('aspicio-menu-bar'));

aspicioMenuBar.add(
new Ext.Toolbar.MenuButton( {
text: 'Static Data',menu : { items: [
{id:"AspicioMenuItem9033125",href:"/aspicio/form/Lister.jsp?listEntityType=Area",text:"Area/Postal/Zip Codes",e:null},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]}}),
new Ext.Toolbar.MenuButton( {
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.Toolbar.MenuButton({
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
new Ext.Toolbar.MenuButton( {
text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="aspicio-menu-bar"></div>
</body></html>

Animal
1 Mar 2007, 6:51 AM
OK, I can get the menu buttons NOT to be buttons-with-arrows by simply specifying them as



{text: "Static Data", menu: {items: [...]}}


And add the following style rule after adding the x-menu-bar class to the menu bar:



x-menu-bar .x-btn-with-menu .x-btn-center em {
background:transparent;
padding-right:0px;
}


There's a complex interaction of assumptions based upon what kind of config is passed in, and the markup created based upon those assumptions, and the style rules.

It is very flexible, but the documentation will be difficult to write. I'll keep investigating so that I can contribute some useful docs.

I'd still like to see the "mousover" style of menu activation on the toolbar though!

dG_
1 Mar 2007, 10:08 AM
Is there any working example for this buttons?

Animal
1 Mar 2007, 11:02 AM
Yes there is. In the examples folder. It's how I got my menu Toolbar to function.

dG_
1 Mar 2007, 11:31 AM
Totally right! I've downloaded the 0.33 version, just checked the v1.0 :)

Thanks

btw, it's never enought to say: beautiful framework! I'll make a donation asap, it sure deserves it!

vajra
1 Mar 2007, 2:56 PM
I have a left navigator menu currently based on YUI that I want to convert to Ext. I have successfully created a toolbar with a menu from the example, but cannot figure out how to create a menu without a toolbar. I just need a floating menu that stays on the left side of the screen.

I don't need a toolbar, just a nice left nav menu with some simple sections of links. Is it possible to create a menu without a toolbar and have it always be visible?

Thanks

Eli

Animal
5 Mar 2007, 6:40 AM
Thinking about this, the application menubar should probably NOT be a Toolbar. A Toolbar doesn't have the underlying awareness of active submenus that a Menu has.

It should itself be a Menu. Just styled to be horizontal.

A menu bar does have to behave slightly differently though. It should need a click on one of its menu items to activate it, and rely on mousseover from then on. Until a click outside the menu bar is detected when all submenus should be deactivated.

Currently, clicking outside hides the menu bar because it's a menu! The only suggestion I can think of is explcitly allowing a config option:



appMenu: true


Which changes the menu to be a permanent fixture.

My demo which goes into the examples/menu directory:



<!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>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-menubar {
width:100%
}
.x-menubar > .x-menu-list > .x-menu-list-item {
padding-left:10px;
padding-right:10px;
display:inline
}
.x-menubar > .x-menu-list > .x-menu-list-item .x-menu-item-arrow {
display:inline
}
.x-menubar-item {
text-decoration:none;
display:inline;
background-image: none
}
.x-menubar-item .x-menu-item-icon {
width:0px
}
</style>
<script type="text/javascript">
YAHOO.util.Event.onAvailable("app-menubar", function() {
aspicioMenuBar = new Ext.menu.Menu({
cls: "x-menubar",
plain: true,
subMenuAlign : "tl-bl?",
});

aspicioMenuBar.add(
new Ext.menu.Item( {
itemCls: "x-menubar-item",
hideOnClick : false,
text: 'Static Data',menu : new Ext.menu.Menu({id:'foo', items: [
{handler:function(e) {
alert(e);
}, icon:"/aspicio/GetEntityImage.do?entity=AppEntity",id:"AspicioMenuItem9033125",href:"/aspicio/form/Lister.jsp?listEntityType=Area",text:"Area/Postal/Zip Codes",e:null},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]})}),
new Ext.menu.Item( {
itemCls: "x-menubar-item",
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.menu.Item({
itemCls: "x-menubar-item",
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}
},
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
// aspicioMenuBar.render();
aspicioMenuBar.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="app-menubar" style="height:30px"></div>
Hello

world!
</body></html>


You can see that it activates on first mouseover - not what's usually expected.

And the whole thing disappears when you click on the page. The menubar should stay.

jack.slocum
6 Mar 2007, 3:01 AM
You should be able to just do it via config override?


hide: Ext.emptyFn

Animal
6 Mar 2007, 3:19 AM
It should also activate its submenus on mouse click rather than mouseover unless a submenu is already active.

Animal
6 Mar 2007, 6:10 AM
OK, here is my demo which drops into examples/menu. It has the Menubar subclass, and a few extra CSS rules.

It works with orientation:"vertical"

The menubar-parent image: http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menubar-parent.gif



<!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>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-menubar {
background-color:#deecfd
}
.x-horizontal-menubar {
width:100%
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding-left:10px;
padding-right:10px;
display:inline;
background-image: none
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item-arrow {
display:inline;
background: transparent url(../../resources/images/default/menu/menubar-parent.gif) no-repeat scroll right 0.4em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
width:0px
}
</style>
<script type="text/javascript">

Ext.menu.Menubar = function(config){
config.plain = true;
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : function(e){}
});

YAHOO.util.Event.onAvailable("app-menubar", function() {
aspicioMenuBar = new Ext.menu.Menubar({
orientation: "horizontal"
});

aspicioMenuBar.add(
new Ext.menu.Item( {
hideOnClick : false,
text: 'Static Data',menu : new Ext.menu.Menu({id:'foo', items: [
{handler:function(e) {
alert(e);
}, id:"AspicioMenuItem9033125",href:"/aspicio/form/Lister.jsp?listEntityType=Area",text:"Area/Postal/Zip Codes",e:null},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]})}),
new Ext.menu.Item( {
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.menu.Item({
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}
},
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
// aspicioMenuBar.render();
aspicioMenuBar.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="app-menubar" style="height:30px"></div>
Hello

world!
</body></html>

VinylFox
6 Mar 2007, 7:16 AM
Nice one Animal, the mouseover menu activation is much more intuitive.

The vertical option is very nice as well.

Not sure where I would use a vertical menu like that, but im sure someone will.

Animal
6 Mar 2007, 7:25 AM
Lots of sites have a menu down the left from which the submenus "fly out" rather than drop down.

Animal
6 Mar 2007, 8:38 AM
Latest version edited in. Works in vertical mode too...

Any chance of having this "adopted" Jack?

VinylFox
6 Mar 2007, 8:59 AM
I 2nd the "adoption" of this



ps, Animal, I was not suggesting that the vertical option would not be used, just that *I* would not have a use for it....this might change in the future.

JeffHowden
6 Mar 2007, 11:41 AM
The horizontal menubar items are display a tad wacky in IE7, fwiw. I'd debug, but don't have the time right now. Other than that, this is a solid addition Animal.

Animal
6 Mar 2007, 12:10 PM
Ah! It just never occurs to me to try IE7. I wouldn't use it myself. It does have to work cross browser though, so I'll take a look tomorrow. I'll give it a whirl in Opera too.

Don't know how I'll fix any visual bugs without Firebug though. The Ext debugger should be helpful.

I suspect it might be IE's buggy CSS selectors. I've use child syntax



.class > .class1


Which selects elements with class "class1" that are direct children of elements with class "class". This is so I didn't have to introduce new class names to elements in the menu bar. I could rely on selecting them using direct child selectors down from ".x-menubar".

If I use descendant selectors, then if a submenu is a child element of the menubar, then its items would pick up my new styling rules.

Having said that, I think submenus are rendered seperately, directly into the document.body, so it might be OK.

I'll fix it up tomorrow.

timb
6 Mar 2007, 12:33 PM
I agree. This looks pretty good Animal, and I'll probably end up using it in my apps.

Jack, I'd also like to see this in the official build. :)

jack.slocum
6 Mar 2007, 6:19 PM
I 3rd it. :) Animal, when you get it ironed out please let me know and I will pull it in.

Animal
7 Mar 2007, 1:51 AM
OK, a few CSS issues ironed out. It looks good on Opera (Opera selects the menu items on mouseover though!?)

The CSS for horizontal menubars is strange. The menu list items (LI elements) have to float left because they are block elements (padding goes wrong if they are inlined). This means that the menu list (UL element) must be float left too otherwise it doesn't get a layout (height = 0px)

Horizontal menu bars are 100% width so this means left and right borders must not be present to avoid some browsers overflowing the viewport.

The only thing that needs to change to adopt it is the location of the menubar-parent image.

Here's the latest (apols for Eclipe's tab/space confusion):



<!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>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-menubar {
background-color:#deecfd
}
.x-horizontal-menubar {
width:100%!important;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list {
float:left;
width:100%;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding-left:0px;
padding-right:10px;
margin-left:10px;
float:left;
background-image:none
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item-arrow {
background: transparent url(../../resources/images/default/menu/menubar-parent.gif) no-repeat scroll right 0.6em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
display:none;
}
</style>
<script type="text/javascript">

Ext.menu.Menubar = function(config){
Ext.applyIf(config, {
plain: true,
cls: ""
});
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : function(e){}
});

YAHOO.util.Event.onAvailable("app-menubar", function() {
aspicioMenuBar = new Ext.menu.Menubar({
orientation: "horizontal"
});

aspicioMenuBar.add(
new Ext.menu.Item( {
hideOnClick : false,
text: 'Static Data',menu : new Ext.menu.Menu({id:'foo', items: [
{handler:function(e) {
alert(e);
}, id:"AspicioMenuItem9033125",href:"/aspicio/form/Lister.jsp?listEntityType=Area",text:"Area/Postal/Zip Codes",e:null},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]})}),
new Ext.menu.Item( {
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.menu.Item({
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}
},
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
// aspicioMenuBar.render();
aspicioMenuBar.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="app-menubar" style="height:30px"></div>
Hello

world!
</body></html>

jack.slocum
7 Mar 2007, 2:03 AM
It's looking better. After this next rev I will spend some time on it. Thanks for providing such a nice base.

FYI: onAvailable = bad.

griffiti93
11 Mar 2007, 3:21 PM
Awesome job, Animal. This is exactly what I've been looking for. I have your example code running fine. I did have a question. If I throw on one of the three "theme" CSS file includes, the look of the horizontal menu obviously is affected too. How could I override this JUST for the menubar?

I would like to add some "menubar" specific rules perhaps to the "theme" CSS files. Some complimentary colors for each theme, just not using the styles for a Menu that goes vertical.

Animal
12 Mar 2007, 12:48 AM
griffiti, I'd wait until this code has been slocumed* and put into an Ext release. I've sent a few bits of code to Jack, and when I see the result in Ext, it's always changed for the better, and I always think... http://www.timetriallingforum.co.uk/style_emoticons/default/HeadSlap.gif why didn't I think of that?

* That's a new verb meaning "to improve or optimize". :lol:

fecund
13 Mar 2007, 11:25 AM
It just never occurs to me to try IE7. I wouldn't use it myself. It does have to work cross browser though, so I'll take a look tomorrow. I'll give it a whirl in Opera too.

Don't know how I'll fix any visual bugs without Firebug though. The Ext debugger should be helpful.

Just started using the "IE Developer Toolbar" on IE- it's very much like Firebug. FF is still my dev environment of choice, but debugging in IE just got a little less painful.

JeffHowden
13 Mar 2007, 12:45 PM
I prefer IE WebDeveloper V2

http://www.ieinspector.com/dominspector/index.html

pibos
13 Mar 2007, 1:08 PM
I have tryied to use menubar with BorderLayout but without succes as menubar requires the page DTD to be at least 4.01 and BorderLayout does not function when page has a doctype above 3.2

Animal, any sugestions? 10x

JeffHowden
13 Mar 2007, 3:05 PM
... and BorderLayout does not function when page has a doctype above 3.2

That's absolute bunk. I have borderlayout running in multiple environments using XHTML 1.0 Transitional and it works perfectly.

Animal
14 Mar 2007, 12:03 AM
I'm using my prototype Menubar in my app for now which uses



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


It works fine with a BorderLayout.

jurglic
16 Mar 2007, 5:21 AM
Hi!

I'm having a problem with menubar positioning. I have the div#app-menubar for the menubar in the north region. It works as suppoused to if my west region is empty. But when I happen to fill the west region, the menubar strangely positions itself a little bit above the end of the content of the west region.

With firebug's help I've discovered the problem arises from div containing the menubar, which has the style attribute top defined:


<div id="container"/>
<div id="ext-gen10" class="x-layer x-menu x-menu-plain x-menubar x-horizontal-menubar" style="position: absolute; z-index: 15000; visibility: visible; left: 0px; top: 600px;">


I would really appreciate if someone takes a look and tells me what am I doing wrong or how can I make this problem go away..

Thnx,
Uros

Animal
16 Mar 2007, 5:35 AM
Menus are fixed in position by the show() method.

You specify an existing element to align it with, and a relative potion indicator to indicate the relationship between the two.

eg:



myMenu.show(myElement, "tl-tl")


To alight the top left of myMenu with the top left of myElement.

This might actually cause some problems with permanent things like MenuBars which may have to move with their containers.

A MenuBar should really take a container argument to its render() method and render INTO an element and be fixed in the document flow rather than being absolutely positioned.

No doubt Jack has been considering this when designing his MenuBar additino for Ext.

jurglic
16 Mar 2007, 6:20 AM
Thnx for instant reply! I've successfully resolved this issue. The problem was menu.show() was called before the layout was constructed. This is now solved.
May I ask you something else? The blank image in front of every menu item is loading really slowly... is there any solution to this problem? I've already set it to locally hosted file, but it still doesn't help much. When I expand the menu for the first time, I can see this images being loaded one by one...

Animal
16 Mar 2007, 6:25 AM
s.gif?

It's a 1x1 px gif which will be loaded once only, and if you host it by setting Ext.BLANK_IMAGE_URL to the url where you want it to come from, then it should work fine.

jurglic
16 Mar 2007, 6:53 AM
Yes, that's the one. I have it set as you suggested, but it's still slow. After I expand the menu for the first time, I first see this 'loading image sign from FF' and right after that blanks appear in a one by one manner - everything happens in a second, but it's noticable. And this happens for every first-level menu at first time of expansion. This probably isn't normal, can I make it preload this image?

Thank you very much for help!

EDIT: Just found out that this is present just in FF not in IE, and then I remember 'disable cache' option might have something to do with it.. Sorry, mea culpa.

jurglic
20 Mar 2007, 4:06 AM
Hello,

I have one more question. After I click the root menu item (the ones seen on the menubar), the URL in browser window gets the char '#' appended, altough I don't configure any hrefs when constructing the menubar. The same happens even when the button is disabled, but the first bothers me the most.. is there any solution to this behaviour? I've searched the MenuButton config docs, but haven't found the solution.


Thanx in advance,

Uros

Animal
20 Mar 2007, 4:50 AM
Try adding a handler function which stops the event.

jurglic
20 Mar 2007, 5:48 AM
I've added the 'handler: myFunction' to the config object of the Ext.menu.Item of the menubar. But the handler doesn't execute after I click it - I've checked this with firebug.

Animal
20 Mar 2007, 8:08 AM
aspicioMenuBar.on("click", function(menuBar, e) {
e.stopEvent();
}, this, true);


This will stop the <a> link to "#" from being followed.

griffiti93
28 Mar 2007, 12:35 AM
Thanks so much Animal for the menubar. It's been working out very nicely. I have had ZERO issues in Firefox. Unfortunately, the menubar is giving me trouble in IE. It has to be a CSS issue, but I haven't been able to nail it down yet. I added the z-index:9999!important; addition per this thread, but still no go.

Screenshot of menubar in Firefox for a project:
http://www.objectworx.com/images/extexamples/menubar.png

Screenshot of menubar in IE for same project:
http://www.objectworx.com/images/extexamples/menubar_ie_app.png

Screenshot of menubar in IE for your example:
http://www.objectworx.com/images/extexamples/menubar_ie_example.png

Animal
28 Mar 2007, 1:47 AM
The z-index BTW was to ensure that it appears below any dialogs. Dialogs start from 10000, Menus from 15000. But a MenuBar should be below everything. Really, it should not be an absolutely positioned element, but that's a bit more development....

Sorry, I can't test your layout problem. I'm on IE7, and it works fine on that.

All I can suggest is that it's something with IE6, and <LI> elements floating left. It looks like it doesn't allow them to flot left.

Try changing the

.x-horizontal-menubar > .x-menu-list > .x-menu-list-item

rule to include "display:inline"

:?: :?: :?: :?: :?:

griffiti93
28 Mar 2007, 7:43 AM
I added the "display: inline" but unfortunately it didn't help. Also, we are unable to run the menubar in IE 7. It displays the same behavior. We are still excited about menubar, and will push our client to install Firefox! :)

http://www.objectworx.com/images/extexamples/menubar_ie7_app.png

Animal
28 Mar 2007, 9:43 AM
Are you sure you've got the latest code and CSS rules from page 2?

I have the menu bar working fine on IE7.

It's the CSS rules that are important. They make "x-menu-list-item"s that are descended from horizontal menu bars float:left so that they don't take up one line each.

visves
30 Mar 2007, 10:12 AM
I'm having the same problem you have described here. I had placed the toolbar on the north part of the layout.

The standalone sample code in this thread however seems to work fine in IE7.

In case you end up resolving the issue, i would appreciate it if you can post your resolution here.



I added the "display: inline" but unfortunately it didn't help. Also, we are unable to run the menubar in IE 7. It displays the same behavior. We are still excited about menubar, and will push our client to install Firefox! :)

http://www.objectworx.com/images/extexamples/menubar_ie7_app.png

Animal
30 Mar 2007, 11:37 AM
That makes it look like it's a CSS problem.

Bring up the Ext console and see what the styles are on those menubar items.

Animal
30 Mar 2007, 11:44 AM
This rule must be enforced on the <li class="x-menu-list-item"> elements:



.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
background-image:none;
float:left;
margin-left:10px;
padding-left:0px;
padding-right:10px;
text-decoration:none;
}


The float property in the final, computed style must be "left".

olimpia
4 Apr 2007, 6:52 AM
See in this link (http://extjs.com/forum/showthread.php?p=20474#post20474) the solution for the IE6

visves
4 Apr 2007, 10:57 AM
that somehow seems to have made my problem disappear in IE7 too. Thanks Olimpia! Thanks to Animal for such a great menu!!



See in this link (http://extjs.com/forum/showthread.php?p=20474#post20474) the solution for the IE6

mdelmarter
5 Apr 2007, 9:19 PM
I hope I am not being pushy, but just wondering if there is any indication of when this menubar will have Jack's input and be available as part of Ext? Trying to weigh up wether to use this version or wait - but the answer kinda depends on expected timeframes.

Again, I am not being pushy - just asking. I totally respect the sheer amount of hours Jack and the team are putting into this high quality project...

Matthew

PS Three things that would improve the menu -
1) hovering over top-level items highlights the menu item (but does not activate until click);
2) keyboard navigation should change for horizontal menu - not up/down but left/right to move to another item
3) Integrating the menu build off a <ul><li> list - as in Animal's example:
http://www.greekhappy.com/ext/example2/example2.html

Animal
5 Apr 2007, 10:05 PM
You could try adding these features yourself, and posting back the code.

mdelmarter
5 Apr 2007, 11:53 PM
Fair comment Animal - I will have an attempt! I think Jack's/your version might be better / work however :)

Animal
6 Apr 2007, 12:08 AM
The nav thing should be not too bad. Look at the nav setup in the base class, and override it with code which checks the orientation.

Activate on mouseover should be optional.

I'm hoping Jack will come up with a MenuBar solution. He'll probably come up with something that makes all this look silly.

mdelmarter
6 Apr 2007, 2:41 AM
OK I now have the horizontal menubar being automatically created from <ul> <li> markup, based on Animals code. It now detects separators and adds them. It also now works in IE.

UPDATE 1: Added automatic detection of icons.
UPDATE 2: Added support for target attribute in links.

Here is all the code, apart from the inclusion of Ext itself:



<script type="text/javascript">
Ext.menu.Menubar = function(config){
Ext.applyIf(config, {
plain: true,
cls: ""
});
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : function(e){}
});

function constructMenu(e, clickHandler)
{
var items = [ ];

Ext.get(e).select('>li').each( function()
{
var html = this.dom.innerHTML;
//check for separator
if(html == "")
{
var currentItem = '-';
}
else
{
//normal menu link
var link = this.child('a:first', true);

//check for icon
try{
var image = this.child('img:first', true);
var icon = image.src;
}
catch(e)
{
var icon = "";
}

var currentItem =
{
text: link.innerHTML,
cls: link.className,
id: link.id,
href: link.href,
e: null,
icon: icon,
hrefTarget: link.target
};
}

//check for sub menu.
var s = this.select('>ul');
if (s.elements.length)
{
currentItem.menu = {items: constructMenu(s.item(0), clickHandler)};
}
items.push(currentItem);
});

return items;
}

Ext.onReady(function()
{
var m = new Ext.menu.Menubar(
{
orientation: "horizontal",
id: "the-menu",
items:constructMenu("test-menu")
});

Ext.get("test-menu").remove();
m.render();
m.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>


<div id="app-menubar" style=""></div>

<ul id="test-menu" style="display: none">
<li><a>File</a>
<ul>
<li><img src="/path/to/icon.gif"><a href="javascript:alert('Save item selected');">Save</a></li>
<li><a href="javascript:alert('Print item selected');">Print</a></li>
<li></li>
<li><a href="javascript:alert('Exit item selected');">Exit</a></li>
</ul>
</li>
<li><a>Help</a>
<ul>
<li><a>Ext Websites</a>
<ul>
<li><a href="http://www.extjs.com" target="_blank">Main Website</a></li>
<li><a href="http://www.extjs.com/deploy/ext/docs/index.html">Documentation</a></li>
<li><a href="http://extjs.com/forum/">Forums</a></li>
</ul>
</li>
<li><a href="javascript:alert('About item selected');">About</a></li>
</ul>
</li>
</ul>

Animal
28 Apr 2007, 1:16 AM
I did have a problem recently with context menus because of my MenuBar.

I have to set the MenuBar's z-index down to 8000 so that it comes in under any dialogs - they start at 9000.

The Menu display code has some kind of smart "registering" of the z-index of the last Menu activated, so that the newly displayed menu can be put above it.

This meant that after using the MenuBar, context menus were being displayed too low down the z order - The Menu system had registered at 8000.

The MenuBar needs integrating into the Ext core Menu package as a special case so that it is


A fixed element, NOT absolutely positioned
Does not contibute to the z-index of subsequent Menu displays

amon
28 Apr 2007, 4:25 AM
It's looks like nice work! :)
I think, it would be a little better, if you check <hr> for separator, not the empty <li></li> tag, because of

1, it is not valid
2, <hr> is a separator, and it can be unobtrusive.

But it is really a small thing. :)

cgi-bin
2 May 2007, 8:42 AM
Is there a way to hide the actual menu once shown? myMenu.hide() doesn't do it. The menu itself isn't rendered inside the referenced element, so hiding it doesn't work either. I tried assigning an id: which it seemed to ignore as well.


myMenu = new Ext.menu.Menubar({
id: "myMenu_1"
orientation: "vertical"
});

...

myMenu.show(Ext.get('someDiv'), "tl-tl");

myMenu.hide()

cgi-bin
2 May 2007, 9:52 AM
Answering my own question...


foo = myMenu.getEl();
foo.hide();

JorisA
5 May 2007, 3:27 AM
A few tiny suggestions:

I added e.stopEvent(); to the onclick handler. This stops from navigating when clicking on a root item. (since I use the location hash for navigation/history)

I added this css since menu items are still jumping a bit when selecting. Anyone better solutions?

.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
border: 1px solid transparent;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-item-active {
border: 1px solid #8BB8F3;
}

Animal
5 May 2007, 8:26 AM
If you want hideable, just use a plain Ext Menu. The whole thing about a MenuBar is that it's a permanent fixture like the menu bar at the top of the browser you're using. Really, it should render into a fixed element, not an absolutely positioned one.

Re the CSS, I'm not getting any jumping from my menus, and we're using my menu bar in the app. I'll post my latest CSS on Tuesday if you bump the thread.

n01champion
15 May 2007, 12:49 PM
how do you put a vertical menubar inside a container on the west region of a borderlayout.... I tried but it doesnt seem to work and I am using the code from page 2

Thanks

noo
19 May 2007, 11:15 PM
big thank Animal for the great code.

i just tested the latest version in a iframe layout (base on the Ext API Doc page ) , unlucky the hrefTarget didnt work for me.

here is my code, all the link in menubar only opened in a new window not in the iframe. i tested in ff2 and ie7.



<!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>
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />

<script type="text/javascript" src="./adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="./adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="./ext-all.js"></script>

<style type="text/css">
html, body {
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
</style>
<style type="text/css">
.x-menubar {
background-color:#deecfd
}
.x-horizontal-menubar {
width:100%!important;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list {
float:left;
width:100%;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding-left:0px;
padding-right:10px;
margin-left:10px;
float:left;
background-image:none
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item-arrow {
background: transparent url(./resources/images/default/menu/menubar-parent.gif) no-repeat scroll right 0.6em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
display:none;
}
</style>
<script type="text/javascript">
var Docs = function(){
var layout, center;

var classClicked = function(e, target){
Docs.loadDoc(target.href);
};

return {
init : function(){
// initialize state manager, we will use cookies
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// create the main layout
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 250,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
useShim:true,
cmargins: {top:2,bottom:2,right:2,left:2}
},
center: {
titlebar: true,
title: 'View Documentation',
autoScroll:false,
tabPosition: 'top',
closeOnTab: true,
//alwaysShowTabs: true,
resizeTabs: true
}
});
// tell the layout not to perform layouts until we're done adding everything
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));

layout.add('west', new Ext.ContentPanel('classes', {title: 'Documentation Explorer', fitToFrame:true}));
center = layout.getRegion('center');
center.add(new Ext.ContentPanel('main', {fitToFrame:true}));

layout.restoreState();
layout.endUpdate();

var page = window.location.href.split('#')[1];
if(!page){
page = 'http://www.extjs.com/';
}
this.loadDoc(page);
// safari and opera have iframe sizing issue, relayout fixes it
if(Ext.isSafari || Ext.isOpera){
layout.layout();
}

},

loadDoc : function(url){
Ext.get('main').dom.src = url;
}
};
}();
Ext.onReady(Docs.init, Docs, true);
</script>

<script type="text/javascript">
Ext.menu.Menubar = function(config){
Ext.applyIf(config, {
plain: true,
cls: ""
});
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : function(e){}
});

function constructMenu(e, clickHandler) {
var items = [ ];

Ext.get(e).select('>li').each( function() {
var html = this.dom.innerHTML;
//check for separator
if(html == "") {
var currentItem = '-';
}else{
//normal menu link
var link = this.child('a:first', true);

//check for icon
try{
var image = this.child('img:first', true);
var icon = image.src;
}catch(e){
var icon = "";
}

var currentItem = {
text: link.innerHTML,
cls: link.className,
id: link.id,
href: link.href,
e: null,
icon: icon,
hrefTarget: link.target
};
}

//check for sub menu.
var s = this.select('>ul');
if (s.elements.length) {
currentItem.menu = {items: constructMenu(s.item(0), clickHandler)};
}
items.push(currentItem);
});

return items;
}

Ext.onReady(function() {
var m = new Ext.menu.Menubar( {
orientation: "horizontal",
id: "the-menu",
items:constructMenu("test-menu")
});

Ext.get("test-menu").remove();
m.render();
m.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>

<body scroll="no" id="docs">
<div id="header" class="ylayout-inactive-content">
<div id="app-menubar" style=""></div>
</div>

<div id="classes" class="ylayout-inactive-content">
</div>

<iframe id="main" id="main" frameborder="no"></iframe>
</body>
</html>


<ul id="test-menu" style="display: none">
<li><a>File</a>
<ul>
<li><img src="/path/to/icon.gif"><a href="javascript:alert('Save item selected');">Save</a></li>
<li><a href="javascript:alert('Print item selected');">Print</a></li>
<li></li>
<li><a href="javascript:alert('Exit item selected');">Exit</a></li>
</ul>
</li>
<li><a>Help</a>
<ul>
<li><a>Ext Websites</a>
<ul>
<li><a href="http://www.extjs.com" target="main">Main Website</a></li>
<li><a href="http://www.extjs.com/deploy/ext/docs/index.html" target="main">Documentation</a></li>
<li><a href="http://extjs.com/forum/" target="main">Forums</a></li>
</ul>
</li>
<li><a href="javascript:alert('About item selected');">About</a></li>
</ul>
</li>
</ul>

Animal
28 May 2007, 2:28 AM
OK, latest version.

It renders into an element, just like an Ext.Component.

This means that you can place it into a static element. This is more like a genuine, permanent Menubar. It should hopefully get ride of teh z-index problems, but I'll test that when I install this at work in Tuesday (another public holiday here in the UK)

This file should drop into the examples/menu directory:



<!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>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-menubar .x-menu-list {
border:0px none
}
.x-menubar {
background-color:#deecfd
}
.x-horizontal-menubar {
padding-left:2px;
border-left-width:0px;
border-right-width:0px;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding-left:10px;
padding-right:10px;
display:inline;
background-image: none;
}
.x-menubar > .x-menu-list > .x-menu-list-item {
border:1px solid transparent
}
.x-menubar > .x-menu-list > .x-menu-item-active {
border: 1px solid #8BB8F3;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item-arrow {
display:inline;
background: transparent url(../../resources/images/default/menu/menubar-parent.gif) no-repeat scroll right 0.4em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
width:0px
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif";

Ext.menu.Menubar = function(config){
config.plain = true;
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls = this.cls ? (this.cls + " x-menubar") : "x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",

// private
render : function(container){
if(this.el){
return;
}
if (container) {
var el = this.el = Ext.get(container);
el.addClass("x-menu");
} else {
var el = this.el = new Ext.Layer({
cls: "x-menu",
shadow:this.shadow,
constrain: false,
parentEl: this.parentEl || document.body,
zindex:15000
});
}

this.keyNav = new Ext.menu.MenuNav(this);

if(this.plain){
el.addClass("x-menu-plain");
}
if(this.cls){
el.addClass(this.cls);
}
// generic focus element
this.focusEl = el.createChild({
tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
});
var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
ul.on("click", this.onClick, this);
ul.on("mouseover", this.onMouseOver, this);
ul.on("mouseout", this.onMouseOut, this);
this.items.each(function(item){
var li = document.createElement("li");
li.className = "x-menu-list-item";
ul.dom.appendChild(li);
item.render(li, this);
}, this);
this.ul = ul;
this.autoWidth();
},

show: function(container) {
if(!this.el){
this.render(container);
}
this.fireEvent("beforeshow", this);
this.fireEvent("show", this);
},

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : function(e){}
});

YAHOO.util.Event.onAvailable("app-menubar", function() {
aspicioMenuBar = new Ext.menu.Menubar({
orientation: "horizontal"
});

aspicioMenuBar.add(
new Ext.menu.Item( {
hideOnClick : false,
text: 'Static Data',menu : new Ext.menu.Menu({id:'foo', items: [
{handler:function(e) {
alert(e);
}, id:"AspicioMenuItem9033125",href:"/aspicio/form/Lister.jsp?listEntityType=Area",text:"Area/Postal/Zip Codes",e:null},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]})}),
new Ext.menu.Item( {
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.menu.Item({
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}
},
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
// aspicioMenuBar.render();
aspicioMenuBar.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="app-menubar"></div>
Hello

world!
</body></html>

timb
28 May 2007, 6:19 AM
Hi Animal,

Thanks for contributing this code. I have found it very useful.

I was using your original implantation in my app and it was working pretty well. However, I can't seem to apply your latest changes. After applying the changes, the menu is vertical even though I specified horizontal. I tried playing around with some styles, but nothing I did seemed to resolve the problem.

I am using a border layout in my app, so I started to modify your example code by adding a border layout. First, the menu looks different in IE when compared to FF. In FF, the menu takes up 100% of the horizontal space. In IE it doesn't. This is with no changes to the example. After adding a border layout to the example, it started throwing javascript errors in IE when trying to navigate the menu. At this point I gave up, as the last version was very easy to implement with border layouts.

I'm not sure if the error is on my side or not. However, I think you should try giving it a spin in IE with border layouts to see if it behaves the way you'd expect.

Animal
28 May 2007, 6:39 AM
Yes, I'll have to put it into a more complex example to really test it.

I'll be doing that at work.

And it doesn't look so great on IE7!

I'm trying to figure out the correct styling for the UL that encapsulates the menu bar.

I'm currently setting the LI's to "display:inline", but I don;t think this is the best option.

Looking at Jack's tab strip in Ext 2.0, each LI in the UL that encapsulates the tab strip is "display:block", but "float:left". But when I set each LI in the menu bar to "float:left", the UL no longer has layout, and is zero pixels high. That problem does not occur with Jack's tab strip, so I'm going to have to examine his DOM, and CSS more closely!

Animal
28 May 2007, 7:20 AM
OK, I found how it's done. Make the container overflow:hidden, so here's the next version. This looks OK in IE7. Not tested in vertical mode...



<!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>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-menubar {
background-color:#deecfd;
position:relative
}
.x-horizontal-menubar {
border-left:0px none;
border-right:0px none;
width:100%!important;
overflow:hidden;
}
.x-menubar .x-menu-list {
border:0px none;
}
.x-horizontal-menubar .x-menu-list {
margin-left:5px;
height:100%;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding:0px 10px;
display:block;
float:left;
background-image: none;
}
.x-menubar > .x-menu-list > .x-menu-list-item {
border:1px solid transparent
}
.x-menubar > .x-menu-list > .x-menu-item-active {
border: 1px solid #8BB8F3;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item {
background: transparent url(../images/default/menu/menubar-parent.gif) no-repeat scroll right 0.6em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
display:none;
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif";

Ext.menu.Menubar = function(config){
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
plain: true,
cls: "",
minWidth : 120,
shadow : false,
orientation: "horizontal",

// private
render : function(container){
if(this.el){
return;
}
if (container) {
var el = this.el = Ext.get(container);
el.addClass("x-menu");
} else {
var el = this.el = new Ext.Layer({
cls: "x-menu",
shadow:this.shadow,
constrain: false,
parentEl: this.parentEl || document.body,
zindex:15000
});
}

this.keyNav = new Ext.menu.MenuNav(this);

if(this.plain){
el.addClass("x-menu-plain");
}
if(this.cls){
el.addClass(this.cls);
}
// generic focus element
this.focusEl = el.createChild({
tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
});
var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
ul.on("click", this.onClick, this);
ul.on("mouseover", this.onMouseOver, this);
ul.on("mouseout", this.onMouseOut, this);
this.items.each(function(item){
var li = document.createElement("li");
li.className = "x-menu-list-item";
ul.dom.appendChild(li);
item.render(li, this);
}, this);
this.ul = ul;
// this.autoWidth(); // not for menu bars.
},

show: function(container) {
if(!this.el){
this.render(container);
}
this.fireEvent("beforeshow", this);
this.fireEvent("show", this);
},

hide: function(){
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},

onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("click", this, e, t);
}
e.stopEvent();
},

onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}
},

onMouseOut : Ext.emptyFn
});

Ext.override(Ext.BasicDialog, {
startMove : function(){
if(this.proxyDrag){
this.proxy.show();
}
if(this.constraintoviewport !== false){
this.dd.constrainTo(this.container || document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
}
},

// private
beforeResize : function(){
this.resizer.constrainTo = this.container;
this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
}
});

Ext.override(Ext.Resizable, {
// private
onMouseMove : function(e){
if(this.enabled){
try{// try catch so if something goes wrong the user doesn't get hung

var eventXY = e.getXY();
if (this.constrainTo) {
var viewport = Ext.get(this.constrainTo).getBox(true);
if ((eventXY[0] < viewport.x) || (eventXY[0] > viewport.right) ||
(eventXY[1] < viewport.y) || (eventXY[1] > viewport.bottom)) {
return;
}
}

//var curXY = this.startPoint;
var curSize = this.curSize || this.startBox;
var x = this.startBox.x, y = this.startBox.y;
var ox = x, oy = y;
var w = curSize.width, h = curSize.height;
var ow = w, oh = h;
var mw = this.minWidth, mh = this.minHeight;
var mxw = this.maxWidth, mxh = this.maxHeight;
var wi = this.widthIncrement;
var hi = this.heightIncrement;

var eventXY = e.getXY();
var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));

var pos = this.activeHandle.position;

switch(pos){
case "east":
w += diffX;
w = Math.min(Math.max(mw, w), mxw);
break;
case "south":
h += diffY;
h = Math.min(Math.max(mh, h), mxh);
break;
case "southeast":
w += diffX;
h += diffY;
w = Math.min(Math.max(mw, w), mxw);
h = Math.min(Math.max(mh, h), mxh);
break;
case "north":
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
break;
case "west":
diffX = this.constrain(w, diffX, mw, mxw);
x += diffX;
w -= diffX;
break;
case "northeast":
w += diffX;
w = Math.min(Math.max(mw, w), mxw);
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
break;
case "northwest":
diffX = this.constrain(w, diffX, mw, mxw);
diffY = this.constrain(h, diffY, mh, mxh);
y += diffY;
h -= diffY;
x += diffX;
w -= diffX;
break;
case "southwest":
diffX = this.constrain(w, diffX, mw, mxw);
h += diffY;
h = Math.min(Math.max(mh, h), mxh);
x += diffX;
w -= diffX;
break;
}

var sw = this.snap(w, wi, mw);
var sh = this.snap(h, hi, mh);
if(sw != w || sh != h){
switch(pos){
case "northeast":
y -= sh - h;
break;
case "north":
y -= sh - h;
break;
case "southwest":
x -= sw - w;
break;
case "west":
x -= sw - w;
break;
case "northwest":
x -= sw - w;
y -= sh - h;
break;
}
w = sw;
h = sh;
}

if(this.preserveRatio){
switch(pos){
case "southeast":
case "east":
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
w = ow * (h/oh);
break;
case "south":
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
break;
case "northeast":
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
break;
case "north":
var tw = w;
w = ow * (h/oh);
w = Math.min(Math.max(mw, w), mxw);
h = oh * (w/ow);
x += (tw - w) / 2;
break;
case "southwest":
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
var tw = w;
w = ow * (h/oh);
x += tw - w;
break;
case "west":
var th = h;
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
y += (th - h) / 2;
var tw = w;
w = ow * (h/oh);
x += tw - w;
break;
case "northwest":
var tw = w;
var th = h;
h = oh * (w/ow);
h = Math.min(Math.max(mh, h), mxh);
w = ow * (h/oh);
y += th - h;
x += tw - w;
break;

}
}
this.proxy.setBounds(x, y, w, h);
if(this.dynamic){
this.resizeElement();
}
}catch(e){}
}
}
});

YAHOO.util.Event.onAvailable("app-menubar", function() {
aspicioMenuBar = new Ext.menu.Menubar({
orientation: "horizontal"
});
var fooDialog;

aspicioMenuBar.add(
new Ext.menu.Item( {
hideOnClick : false,
text: 'Static Data',menu : new Ext.menu.Menu({id:'foo', items: [
{handler:function(e) {
if (!fooDialog) {
fooDialog = new Ext.BasicDialog("foo", {
id: "foo",
autoCreate: true,
title: "Crap!",
height:300,
width:500,
container: Ext.get("page-content")
});
}
fooDialog.show();
}, id:"AspicioMenuItem9033125",text:"Test drag+resize constrained dialog"},
{id:"AspicioMenuItem19492082",href:"/aspicio/form/Lister.jsp?listEntityType=ClassControl",text:"Class Control",e:null},
{id:"AspicioMenuItem11503760",href:"/aspicio/form/Lister.jsp?listEntityType=Company",text:"Companies",e:null},
{id:"AspicioMenuItem3073770",href:"/aspicio/form/Lister.jsp?listEntityType=Component",text:"House Components",e:null},
{id:"AspicioMenuItem20588656",href:"/aspicio/form/Lister.jsp?listEntityType=Contact",text:"Contacts",e:null},
{id:"AspicioMenuItem20247172",href:"/aspicio/form/Lister.jsp?listEntityType=ContactType",text:"ContactTypes",e:null},
{id:"AspicioMenuItem18735554",href:"/aspicio/form/Lister.jsp?listEntityType=Country",text:"Countries",e:null},
{id:"AspicioMenuItem13680254",href:"/aspicio/form/Lister.jsp?listEntityType=CountrySubEntity",text:"Country sub-entities",e:null},
{id:"AspicioMenuItem9076515",href:"/aspicio/form/Lister.jsp?listEntityType=Currency",text:"Currencies",e:null},
{id:"AspicioMenuItem10540066",text:"DateInfo",handler:function(){alert('DateInfo')},e:null},
{id:"AspicioMenuItem13053583",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem12701045",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{id:"AspicioMenuItem26728815",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem4465913",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem30904317",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem19810748",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null},
{id:"AspicioMenuItem32176415",href:"/aspicio/form/Lister.jsp?listEntityType=TimeZone",text:"TimeZones",e:null},
{id:"AspicioMenuItem25793650",href:"/aspicio/form/Lister.jsp?listEntityType=User",text:"Users",e:null},
{id:"AspicioMenuItem24169794",href:"/aspicio/form/Lister.jsp?listEntityType=UserGroup",text:"User Groups",e:null}
]})}),
new Ext.menu.Item( {
text: 'Application Data',menu : {items: [
{id:"AspicioMenuItem936842",href:"/aspicio/form/Lister.jsp?listEntityType=AppTaxNoValidation",text:"Tax No Validations",e:null},
{id:"AspicioMenuItem8488811",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem31566615",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}}),
new Ext.menu.Item({
text: 'Test Menu',menu : {items: [
{id:"AspicioMenuItem18438441",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem19712954",href:"/aspicio/form/Lister.jsp?listEntityType=EconomicGroup",text:"Economic Groups",e:null},
{id:"AspicioMenuItem32724551",href:"/aspicio/form/Lister.jsp?listEntityType=Language",text:"Languages",e:null},
{text: 'Test YUI Submenus',menu : {items: [
{id:"AspicioMenuItem10850020",href:"/aspicio/form/Lister.jsp?listEntityType=AppClass",text:"Application Classes",e:null},
{id:"AspicioMenuItem21507463",href:"/aspicio/form/Lister.jsp?listEntityType=AppComponent",text:"Application Components",e:null}
]}
},
{id:"AspicioMenuItem17043614",href:"/aspicio/form/Lister.jsp?listEntityType=Market",text:"Markets",e:null},
{id:"AspicioMenuItem31390655",href:"/aspicio/form/Lister.jsp?listEntityType=Menu",text:"Main Menu Groupings",e:null},
{id:"AspicioMenuItem6405019",href:"/aspicio/form/Lister.jsp?listEntityType=Player",text:"Supply-Chain Players",e:null},
{id:"AspicioMenuItem6551495",href:"/aspicio/form/Lister.jsp?listEntityType=PlayerType",text:"Player Types",e:null}
]}})
);
// aspicioMenuBar.render();
aspicioMenuBar.show(Ext.get("app-menubar"), "tl-tl");
});
</script>
</head>
<body scroll="no" class="mso " >
<div id="app-menubar"></div>
<div id="page-content" style="height:600px">
Hello

world!
</div>
<div id="footer" style="border-top:1px solid blue">
</div>
</body></html>

timb
28 May 2007, 9:00 AM
Looks good! I've updated my app with the latest code and it's working as expected. Thanks Animal!

I have a couple of questions.

Is there any reason you have config.plain = true in the init rather than as a prototype? The reason I ask is that if you create a menubar without passing any options, it will throw an error. I've moved it so that it's declared as a prototype so that I can create a new menubar like so:
var myMenubar = new Ext.menu.Menubar();

Here's part of the code that I changed:
Ext.menu.Menubar = function(config){
//config.plain = true; //moved below
Ext.menu.Menubar.superclass.constructor.call(this, config);
this.cls = this.cls ? (this.cls + " x-menubar") : "x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 120,
shadow : false,
orientation: "horizontal",
plain: true, //moved to here
...

Second, the formatting is incorrect in IE7 without the strict doctype. Due to this, I assume that this won't work in IE6 (I haven't tested it yet). Is there anyway to resolve this so that it works with IE6?

timb
31 May 2007, 10:29 AM
I ran a test and confirmed that the menu isn't rendered correctly in IE6 (horizontal).

Animal
31 May 2007, 12:16 PM
Hmm. I don't have IE6. With IE being free, I can't see why it would still be in use really.

Take a poke about at the CSS to see if you can fix it.

timb
31 May 2007, 12:34 PM
Actually, many of my clients still use IE6. Even though IE6 is "free", it can still be quite costly for larger organizations to test and roll out these types of updates.

Any suggestions on what to look for? Styles aren't my strongest point.

Note: You don't have to have IE6 to reproduce this problem. You can also reproduce it in IE7 by removing the doctype line.

Animal
31 May 2007, 12:53 PM
Use the Ext debug console to poke around at the styling of the menubar. control+shift+home brings up the Ext debugger I think.

I'll test my app in IE7 tomorrow (if I get time - bit of a rush on now).

medusadelft
2 Jun 2007, 1:20 PM
Animal,

Great piece of code (together with the build from markup somewhere in this thread)!
I can also confirm the IE6-problem mentioned above. It is style-sheet related. Removing the '>' in the styles-definitions solves the problem, for as far as I can see.

Note: the dark line that now occures in IE6 has to do with the line


.x-menubar .x-menu-list .x-menu-list-item {
border:1px solid transparent;
}

So change this to:


.x-menubar .x-menu-list .x-menu-list-item {
border:1px solid #deecfd;
}
and all problems are solved for as I can tell.

Only tested with FF 1.5 and IE6.

timb
3 Jun 2007, 7:55 AM
Thanks for the info medusadelft. I made the changes you posted and it resolved the problem. I have tested it with my app in IE7 and FF2 with both the doctype and without, and it works as expected. I will test IE6 on Monday when I am in the office.

rbudisa
6 Jun 2007, 7:12 PM
Thanks Animal and guys for this little intro and lesson into the ext world. Very useful component.

JorisA
7 Jun 2007, 12:21 PM
I suggest this function for the onclick handler. This way when you've got a item without children (like home) it will follow the link anywaay.



onClick : function(e){
var t = this.findTargetItem(e);

if(t && t.menu === undefined){
t.onClick(e);
this.fireEvent("click", this, t, e);
} else {
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
} else if(t){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
this.fireEvent("click", this, e, t);
}
e.stopEvent();
}
}


further more all items that are added after Ext.Toolbar.Fill() will appear on a new row instead of on the right.

Condor
11 Jun 2007, 6:55 AM
Any chance of finalizing this component and creating a demo page? I would really like to use a menubar in my application (and I am not alone according to http://extjs.com/forum/showthread.php?t=5583).

ps.

Hmm. I don't have IE6. With IE being free, I can't see why it would still be in use really.

Yes, IE7 if free, but only supports WinXP and Vista. So I'm stuck with IE6 on my Win2000 workstation (I need to use VMWare to test my designs on IE7!).

JorisA
12 Jun 2007, 7:16 AM
I've got demo running here:

http://ext.designism.nl/examples/menu/menu.html

Will try to keep it updated with modifications in this thread.

medusadelft
12 Jun 2007, 10:14 AM
Joris, you haven't done all the changes I suggested.
At this moment, your example is not displayed properly in IE6. You should do this as well:

Removing the '>' in the styles-definitions solves the problem, for as far as I can see.

Good luck, it's working. I'm using it in my app as well.
Maurice.

Animal
12 Jun 2007, 10:41 AM
I've got demo running here:

http://ext.designism.nl/examples/menu/menu.html

Will try to keep it updated with modifications in this thread.

The spacer element causes the "Test Menu(2)" item to wrap onto the next line because it has a width of 100%.

JorisA
12 Jun 2007, 1:23 PM
According to
the documentation (http://extjs.com/deploy/ext-1.1-beta1/docs/output/Ext.Toolbar.html#addFill) it should force subsequent additions to the right side of the toolbar.

Animal
13 Jun 2007, 12:36 AM
It's not a Toolbar, it's a Menu. They are different things with different DOM structures.

JorisA
13 Jun 2007, 3:22 AM
Ok thank you Maurice.

Another weird thing is that border:1px solid transparent; puts a black border around the menu items in IE6 (??). Replaced it now with border:1px solid #deecfd; but still weird.

Animal
13 Jun 2007, 3:35 AM
You can probably get around that with margin instead of border. Margins are transparent.

Condor
13 Jun 2007, 4:13 AM
When the menubar is not selected and I hover over the menuitems with the mouse there is no visual feedback. The menubar highlights items only when the menubar is selected (by clicking on it).

On Windows the menuitem is always highlighted (by color or indentation) when pointed at by the mouse cursor.

Would it be possible to add this feature ?

JorisA
13 Jun 2007, 9:32 AM
I modified the example a bit so it has the highlights on mouseover anyway. not quite perfect yet (other color when expanded would be nice).

edit:
Everything should be working fine by now. Menus always have the hover effect, and when clicked the submenu's are activated. Please review and improve ;)

JorisA
14 Jun 2007, 4:25 AM
http://extjs.com/learn/Extension:MenuBar :D

medusadelft
14 Jun 2007, 11:45 AM
Joris, good work!
Unfortunately, when I open your example in IE6 and click on one of the 'hide' buttons, I see an error occure:

Line 346
Char 1
Error 'aspicioMenuBar 'is undefinied

I have no time to look in to it at the moment.
I also noticed that the 'home' button has an arrow pointing down, but in IE6 (not checked in other browsers), there is no menu under 'home'. It's a bit confusing I think for users.

Best regards,
Maurice.

JorisA
14 Jun 2007, 1:01 PM
Fixed both I think!

Animal
14 Jun 2007, 11:07 PM
Nice job. It's looking good.

Just one thing.

Both Menubars can have open menus at the same time.

Activating one should deactivate all others.

medusadelft
15 Jun 2007, 5:57 AM
Yes, both problems are solved. Well done Joris!

I'm not sure if it bothers me that both menu's have open subs, but I can see Animal's point. It might be strange compared to Windows.

JorisA
15 Jun 2007, 9:24 AM
Fixed as well I think. but the code could use some clean-up. If anyone feels like it please :P If not I will somewhere next week or so when I've got more time.

JorisA
24 Jun 2007, 4:13 PM
I updated the demo page:
http://ux.designism.nl/ux/menubar/

I'm trying to create a sort of simple user extension demo framework so if download/source links don't work please let me know.

quilleashm
11 Jul 2007, 8:37 AM
Hi all,

Thanks for the work on this menu bar. Don't know if anyone is still watching this. I've integrated it now and it works really well. There is two minor problems I have come across. One is more of an additional feature.

The first, probably a minor bug is when you do the following.

1. Ensure focus is somewhere else on the screen first, click anywhere outside the menu bar will do.

2. Click any menubar item to drop down. Notice the background goes white.

3. Click the same item to close it. Background goes back to blue/default.

4. Click the same item again to re-open it. Notice this time the background does NOT change colour. It stays blue.

5. Move your mouse cursor very very slowly down from the menu bar toward the menu. Where the two join you can usually find a "gap" where the drop down menu will disappear.

6. It will remain broken, even on different menu bar items until you click outside the menubar which resets the state and the white background works properly again.

Looking at the code it looks like something to do with the activation state not being reset quite right as that is where the white background class gets applied (in activate()). Will investigate further tomorrow.


Second item, probably just a missing feature, is that icons don't seem to work on the menu bar itself. I might be doing something wrong, but just adding a raw Ext.menu.Item with text and icon to the menu bar, the icon wasn't displayed.

All on Firefox 2.

Cheers.

Mike.

seade
12 Jul 2007, 3:37 AM
4. Click the same item again to re-open it. Notice this time the background does NOT change colour. It stays blue.


And at this point you cannot click on the same item further time to close the menu - in fact if you move to a different item it does not drop down automatically as it does when the background is white.

On a different note, is is possible to make the items on the menubar that are not drop down menus narrower - i.e. since they do not include the manubar-parent.gif they could be rendered narrower to save some horizontal space.

Excellent extension BTW.

Scott

seade
12 Jul 2007, 3:50 AM
On a different note, is is possible to make the items on the menubar that are not drop down menus narrower - i.e. since they do not include the manubar-parent.gif they could be rendered narrower to save some horizontal space.


Okay, so answering my own query, in the items concerned I set itemCls : "x-menu-item x-menu-item-slim" and used x-menu-item-slim to set padding: 3px to override the 21px padding-right provided by x-menu-item.

Scott

quilleashm
13 Jul 2007, 8:40 AM
I have fixed the problem I found above with the menu not deactivating properly.

Change the activate function like so...



activate : function(){
// Sort of a hack to deactivate the menu when clicked somewere else or when an other menu opens.
this.fireEvent("beforeshow", this);
this.fireEvent("show", this);

this.activated = true;
this.ul.addClass("x-menu-activated");
},


The problem is the beforeShow event ends up firing the deactivate method of the Menubar which removes the style and sets the activated status back to false. I've just moved the event firing above the work that this class does so the class and activated status are set after.

JorisA
14 Jul 2007, 1:18 AM
Nice. Thank you. Updated the example @ http://ux.designism.nl/ux/menubar/

btw: can a mod move this to user extensions forum?

sdrew
21 Aug 2007, 2:42 PM
It appears that the drop down menus are hidden if there is a flash object underneath the menu bar, at least under IE.

Is there any quick fix, I tried adding z-index:9999 to the app-menubar div, but no luck.

Thanks,
Steve.

stever
21 Aug 2007, 4:26 PM
You need to set the wmmode to transparent for the flash.

seade
29 Aug 2007, 7:39 PM
graffiti93 kind of mentioned it in an earlier post, but I thought it might be worth mentioning again that including one of the theme css files mucks up the rendering of the menubar.

I imagine that menubar.css could be adjusted a little to clear this up (albeit without adjusting its presentation for the selected theme).

It would be nice to get some feedback from the Ext guys as to whether or not this extension is likely to make it's way into ExtJS.

Cheers,

Scott

fangzhouxing
24 Sep 2007, 2:55 AM
The menubar component is very useful. I find a bug:
align:right does not have any effect in IE 6.
Can any one help me?

Animal
24 Sep 2007, 6:17 AM
Are you using the version from the user extensions page? I think it's improved from the version posted here.

http://extjs.com/learn/Image:UxMenuBar_tn.jpg

fangzhouxing
24 Sep 2007, 4:58 PM
I used the page from:
http://ux.designism.nl/ux/menubar/
(0.6.1 (Rev 13))

You can see this problem when you open above page in IE 6.

venturi
26 Sep 2007, 10:13 PM
Greetings!

Love the MenuBar extension; it is exactly what I was looking for.

Hoping someone here can help me identify the source and fix a small problem with it. This is mostly cosmetic, but quite annoying nonetheless. I'm pretty new to ext, and no JS guru either though I have been programming for a couple decades. So if my issue is worthy of labelling me "noob" so be it, I can take it. :)

I'm building the menu dynamically from data pulled from an external db, and that is working fine. However, the items off the main menu list are not expanding out to the right. Instead they drop down below the opening menu item. I took the example code with the static menu and pasted it into the same script and those behave properly - items and sub-menus push out to the right and then flow down.

The only difference I have been able to identify between my menu and the example one is that mine is built in pieces (each top level menu is a separate call to the add() method).

Here is the code of my menu...


function popMenus () {

var parent, child, myMenuItem, itemId;

myMenu = new Ext.ux.Menubar({
orentation: 'vertical'
});
for ( var i = 0; i < menuDS.getCount(); i++ ) {
parent = menuDS.getAt(i).data;
if ( parent.children.length ) {
myChildren = [];
for ( var j = 0; j < parent.children.length; j++ ) {
child = parent.children[j];
guid = child.program ? child.program : '';
myChildren.push({ guid: guid, handler: loadScript, text: child.text });
}
guid = parent.program ? parent.program : '';
myMenu.add( new Ext.menu.Item({
hideOnClick: false,
text: parent.text,
menu: new Ext.menu.Menu({
guid: guid,
items: myChildren
})}));
} else {
guid = parent.program ? parent.program : '';
myMenu.add( new Ext.menu.Item({
guid: parent.program,
text: parent.text,
handler: loadScript
}));
}
}
myMenu.show(Ext.get("west-div"), "bl-bl");

} // popMenus


Thanks in advance for your guidance!

venturi
27 Sep 2007, 7:55 AM
It's official - I am an *****!, or as my code above would indicate an 'idot'.


...
orentation: 'vertical',
...

I think I will keep to myself how many hours I poured over that code trying to figure out why it wasn't working right and totally missed that spelling error. :((

chidera
27 Sep 2007, 5:31 PM
Hello,

I've just started to use this and have some of the basics down, I guess. I'm wondering a couple of things, though:

How does one cause a sub-menu to fly out WITHOUT clicking on the main menu? That is, how can the sub-menu fly out from a hover?
How does one make it such that clicking on a main menu item will follow the link instead of simply opening/closing the sub-menu?
Will a "slocummed" version of this be available in 2.0?

Thanks in advance to anyone who takes the time to answer these questions.

Travis

seade
2 Oct 2007, 3:27 PM
Will a "slocummed" version of this be available in 2.0?

I too am wondering about compatibility with 2.0 - is there something in 2.0 that replaces this? The alternative would be to update the extension for 2.0, if in fact any changes are required.

Has anyone tried this against ExtJS 2.0 yet?

Cheers,

Scott

fangzhouxing
2 Oct 2007, 5:40 PM
Has anyone tried this against ExtJS 2.0 yet?
Yes, I have tried the menuBar in ExtJS 2.0 dev 5, and had no problem.

tjcrowder
11 Oct 2007, 1:35 AM
Hi folks,

First off, thanks Animal and contributors for the Menubar extension! I would recommend to the ExtJS core team that they take it as a starting point for putting a Menubar in ExtJS officially rather than as an extension. Even with modern interfaces, menubars are still sometimes necessary.

I'm running into a couple of problems with the extension. Initially I wasn't sure if it was a 2.0-alpha-1 problem so I downloaded and tried it with 1.1 (I've never used ExtJS 1.x) but got the same results. There are two main problems I'm seeing:

1. There is a marked delay between clicking the main menu item (for instance, "Static Data" in the demo) and the associated memo appearing. I thought this might be a "fade-in" or something but I wasn't seeing an effect. It's enough of a delay that it's irritating, and it's not a one-time thing, it happens every time on every menu. It's the showDelay config parameter in Ext.menu.Item, which defaults to 200ms. Recommendation: Automatically default showDelay to 0 for this kind of menu if not specified, users don't like to wait. :)

2. Menus have a habit of closing when I haven't (intentionally) asked them to. I've seen this in various ways, but here's an easily-reproduced way that I've isolated: Using the demo, click the Static Data menu, move the mouse down to "Submenus" and click it to expand that submenu. The items will appear briefly (usually just long enough for me to get my mouse over there) and then the entire menu disappears. I'm guessing this is because of the click on the word "Submenus". But I've also seen them disappear without requiring a second click and I don't think my cursor moved out of the menu area. Naturally I could be wrong there, but other menus aren't disappearing on my all the time, so...

I'm using Windows XP and tested with FF 2, Safari 3 beta, and Opera 9; same behavior in each (there's a highlighting problem on Opera 9 as well).

Separately from the problems above, there are some behaviors I would recommend changing:

A. You shouldn't have to click the main menu item to open the pull-down; just doing a mouse-down should be enough. With pull-down menus, the typical action (IMHO) is to mouse down on the top-level menu and keep it down while moving to your choice, and then release it. (The other action, clicking, should also work.) Changing line 56 of the current Menubar.js to hook the mousedown event instead of the click event works for getting the menu open and the highlighting of items works great, but more work is required -- releasing the mouse on the item doesn't trigger it.

B. Keyboard navigation, part 1: The top-level menu seems to support keyboard navigation, but not with the keys I would expect: The up and down keys move me left and right (respectively) around the menus. I'd expect left and right to do that, with up and down opening the menu you're on at either the bottom or top item (respectively).

C. Keyboard navigation, part 2: Using the left and right arrow keys when you're in a pulled-down menu that doesn't have a submenu should move you to the top-level menu to the left and right; currently they don't do anything.

And finally a question: Is there an option to get rid of the down-arrow on the main menu item? Menu bars don't typcially have these... I haven't used ExtJS's menus extensively yet, but I didn't immediately see a BaseItem or Item config option for that.

Thanks -- and again, thanks for the extension,

tavox
14 Oct 2007, 4:35 AM
Greetings!

Love the MenuBar extension; it is exactly what I was looking for.

Hoping someone here can help me identify the source and fix a small problem with it. This is mostly cosmetic, but quite annoying nonetheless. I'm pretty new to ext, and no JS guru either though I have been programming for a couple decades. So if my issue is worthy of labelling me "noob" so be it, I can take it. :)

I'm building the menu dynamically from data pulled from an external db, and that is working fine. However, the items off the main menu list are not expanding out to the right. Instead they drop down below the opening menu item. I took the example code with the static menu and pasted it into the same script and those behave properly - items and sub-menus push out to the right and then flow down.

The only difference I have been able to identify between my menu and the example one is that mine is built in pieces (each top level menu is a separate call to the add() method).

Here is the code of my menu...


function popMenus () {

var parent, child, myMenuItem, itemId;

myMenu = new Ext.ux.Menubar({
orentation: 'vertical'
});
for ( var i = 0; i < menuDS.getCount(); i++ ) {
parent = menuDS.getAt(i).data;
if ( parent.children.length ) {
myChildren = [];
for ( var j = 0; j < parent.children.length; j++ ) {
child = parent.children[j];
guid = child.program ? child.program : '';
myChildren.push({ guid: guid, handler: loadScript, text: child.text });
}
guid = parent.program ? parent.program : '';
myMenu.add( new Ext.menu.Item({
hideOnClick: false,
text: parent.text,
menu: new Ext.menu.Menu({
guid: guid,
items: myChildren
})}));
} else {
guid = parent.program ? parent.program : '';
myMenu.add( new Ext.menu.Item({
guid: parent.program,
text: parent.text,
handler: loadScript
}));
}
}
myMenu.show(Ext.get("west-div"), "bl-bl");

} // popMenus


Thanks in advance for your guidance!
How do you load your records from the database into menuDS??? can you please explain it and also can you post your table structure?

Best regards,

Animal
15 Oct 2007, 8:53 AM
I think in Ext 2.0, you really can use the Toolbar as a Menu bar and save a lot of code.

Try something like this:



var myMenubar; // must predeclare it so that listeners can reference it.
myMenuBar = new Ext.Toolbar({
buttons: [{
text: 'File',
menu: myFileMenu,
listeners: {
mouseover: Ext.Toolbar.prototype.onButtonTriggerOver,
scope: myMenuBar // references the toolbar instance
}
}, [
text: 'Edit',
menu: myEditMenu,
listeners: {
mouseover: Ext.Toolbar.prototype.onButtonTriggerOver,
scope: myMenuBar
}
}]
});

Animal
15 Oct 2007, 8:57 AM
Yeah that works.

Try changing the following lines in examples/menu/menus.js. My additions are in bold:



tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu , // assign menu by instance
listeners: {
mouseover: Ext.Toolbar.prototype.onButtonTriggerOver,
scope: tb
}
},
new Ext.Toolbar.MenuButton({
text: 'Split Button',
handler: onButtonClick,
tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
iconCls: 'blist',
listeners: {
mouseover: Ext.Toolbar.prototype.onButtonTriggerOver,
scope: tb
},

tjcrowder
15 Oct 2007, 9:20 AM
Yeah that works.

I'm not seeing much difference vs. the unchanged file; what's the behavior difference?

Thanks,

Animal
15 Oct 2007, 10:53 AM
Once you click on a button, and its menu is popped up mousing off that button and over another button on the toolbar that has a menu closes the old menu pops up the new button's menu. Just like a menu bar.

tjcrowder
15 Oct 2007, 2:53 PM
Once you click on a button, and its menu is popped up mousing off that button and over another button on the toolbar that has a menu closes the old menu pops up the new button's menu. Just like a menu bar.

But that's my point: Even without those changes, the example seems to do that (although it's a bit sluggish about it). But see my notes above, neither with the changes nor without is very much like menu bars as we know and love them. :)

fangzhouxing
15 Oct 2007, 4:49 PM
I think in Ext 2.0, you really can use the Toolbar as a Menu bar and save a lot of code.

hi,Animal,but can we set the background color of Toolbar white as with menuBar?

Animal
15 Oct 2007, 11:05 PM
I see, yes it does maintain menu active status (My changes only have an effect where the button is a split button where the menu only triggers on mouseover the downarrow). Well. No need for a seperate menu bar class at all now then.

tjcrowder
16 Oct 2007, 12:04 AM
No need for a seperate menu bar class at all now then.

:) Except, again, my notes above (http://extjs.com/forum/showthread.php?p=72201#post72201). If the toolbar can be configured to do that stuff, great, let's put out a robust boring-old-fashioned-window-with-menubar example so people know it's easy to do.

nosepope
16 Oct 2007, 11:29 AM
Hi,

how would you go about adding a combobox as an item in the menu bar?
I am trying to figure out if I couldn't coerce the code to accept "<div>" or span tags
as text attribute values that I could then attach the combobox to.....but of course that does not work :(

Can you point me to a good way accomplishing this?

Thanks!!

Animal
16 Oct 2007, 11:36 AM
You can't do it with the Menu class yet. It's not yet part of the Container/Component heirarchy.

You can add a combo to a Toolbar though as shown in the examples.

nosepope
17 Oct 2007, 8:17 AM
Thanks Animal,

I have wrestled with the DOM a bit and now I do have an autocompleting Combobox in one of the Menu Items fetching results from the server.
As so (oh, I am not quite comfortable with Ext yet, so there are a few snippets from prototype as well):

..... snip ....
new Ext.menu.Item( {
text: '<div id="cb"></div>', id:'testid', level: 0
}),

....snip - more items......
var myDiv = Ext.get('cb');
var li = $('cb').parentNode.parentNode;
Element.remove(li.firstChild);


new Insertion.Top(li,'<input id="test"/>');
// data store
var phys_ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: makeURL() + 'views/maintenance/p_list.php'
}),
reader: new Ext.data.JsonReader({
root: 'p',
id: 'case_id'
},['patient_id','dob', 'name', 'status', 'case_id','show', 'row2'])
});
var resultTpl = new Ext.Template(
'<div class="search-item">',
//'<div style="min-width:200px;white-space:nowrap;"><b>{show}</b>&nbsp;{dob}</div>',
'<table><tr><td style="width:200px">{show}</td><td>{row2}</td></tr></table>',
'</div>'
);
var phys_cb = new Ext.form.ComboBox({
hiddenName:'pname',
store: phys_ds,
displayField:'name',
typeAhead: false,
emptyText:'look up name.....',
selectOnFocus:true,
width:190,
valueField:'case_id',
minChars:1,
hideTrigger:true,
id:'physician_name',
tpl:resultTpl
});
phys_cb.applyTo('test');

phys_cb.on("expand", function() {
phys_cb.list.setStyle("width", "auto");
phys_cb.list.setStyle("z-index", "19000");
phys_cb.innerList.setStyle("width", "auto");
}, {single: true});
phys_cb.on("focus", function(el){el.setRawValue('')});
phys_cb.on("select", function(el){window.location='c_chart.php?case=' + el.getValue()})

Something strange remains, though. I can't get the combobox to select on focus(), can't even position the cursor when clicking in the field.
Only the arrow keys work.......

Thanks!

tjcrowder
19 Oct 2007, 7:26 AM
Hi all,

If you're following this thread, you may -- or may not! -- want to check out a new one I've started to avoid hijacking this one: Wanted: A pull-down menubar for ExtJS 2.0 (http://extjs.com/forum/showthread.php?t=15751)

rballman
22 Oct 2007, 9:17 AM
Does anyone have any examples of loading the menu from a database source dynamically?

Thanks!

jo2008
25 Oct 2007, 8:33 AM
I tried adding a Ext.menu.CheckItem as first level menu item and it won't show the check box.

Does anybody know how to fix this?

I'm using Ext 2.0 b1.

KRavEN
1 Nov 2007, 5:11 AM
How can I make very long menu's scroll when they are longer than the viewable page? Ideally they should have the scrollbar on the side of the menu and be able to move up and down with the mousewheel or arrow keys.

amitsingh
4 Nov 2007, 9:50 PM
I used the page from:
http://ux.designism.nl/ux/menubar/
(0.6.1 (Rev 13))

You can see this problem when you open above page in IE 6.
Hi All,
Did anyone find a fix for this problem?

jitensachdeva
31 Jan 2008, 8:25 AM
Well I took some time in reading this thread. The menubar is an excellent tool.

I was wondering, do we have any workaround to display the menu on mouseover. The code which is available here (http://ext.designism.nl/examples/menu/menu.html), will show menu's on mouseover only if we click the menu once.

mohd_osman
4 Mar 2008, 8:32 AM
Well I took some time in reading this thread. The menubar is an excellent tool.

I was wondering, do we have any workaround to display the menu on mouseover. The code which is available here (http://ext.designism.nl/examples/menu/menu.html), will show menu's on mouseover only if we click the menu once.

Did you find any solution for this?

Remy
17 Apr 2008, 2:49 PM
I am looking for a demo of using inline UL/LI to create a menu using the excellent menubar component. I am having difficulties getting this to work (coupled with difficulties integrating into an existing app which I won't go on about at present). I would like to have a DB driven menu which generates the inline UL/LI elements and don't know how to associate these with the menubar.

I could generate the scripting to add the entities via the DOM but that would be a lot messier.

Any help will be gratefully received. I am desperate to use this component as its easily the best menubar I have seen and would like to replace my current one.

Remy
19 Apr 2008, 12:24 AM
Ok, my last post maybe wasn't clear enough.

I would like to use the menubar with jquery and have jquery build the menu based on the unordered list contained within the menubar DIV. I am not familiar enough with either Ext OR JQuery to accomplish this. I have the JQuery and Ext properly configured as I can use this combination to display an Ext.Msg.Alert and my menubar is properly configured as I can generate this from the script itself.

I have this defined:

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "javascript/Ext/resources/images/default/s.gif"
$(document).ready(function(){
<!-- menu -->

FullMenuBar = new Ext.ux.Menubar({
orientation: "horizontal"
});

FullMenuBar.show(Ext.get("menubar"), "bl-bl");
});
</script>

What i would like to do is iterate through the UL/LI elements and add these to my menubar using JQuery, any help?

thanks,
Remy

s_kumar
30 Apr 2008, 1:31 AM
It should also activate its submenus on mouse click rather than mouseover unless a submenu is already active.

Hi animal,
I am also having problem regarding Menu.I am having a Viewport and in north there is a menu toolbar. I have to added collapsable Panels at runtime to east ,west and center region depending on menu Action. somtimes only in the center region then i need to hide east and west.

Help me out....

NegrilLover
2 May 2008, 6:24 AM
Is it possible to use menubar/menuitems with buttons that have icons with no text? I have tried with no success. If so, what would need to be changed to allow this? Also, what css attribute can be used to lower the initial position placement (top, left) of the grid?

Another related question is that I would like the menu to appear when a user mouses over the button (flyout). I have tried this with no success:



id:'Home',
qtip: 'Home',
listeners: ({ 'mouseover': function(event, toolEl, panel) {
ExampleMenuBar.show(this, "tl-tl");
}

})


I am able to display the menu just adding a handler above and then clicking on the button to display the menu but would like it also to use flyout on mouseover and have the menu appear directly below the header where the icon button resides.


Thanks

mshirishkumar
27 Sep 2008, 3:40 AM
Hi Animal and Other Extjs Lovers,
I am working on the menubar and i want to show menu look like Windows Menu and i want to know how can i add shortcut keys for the menu and also i need to add one more column after the text. For example('Menu Icon','Menu Text','menu Shortcut') [Save Cltr + s ] and also how can i get which menu item is in focus and execute the key navigation with respect to that menu item.:(

Thanks!!

innovator
21 Oct 2008, 5:32 AM
Hi ,
This is my code, i want a different color for toolbar. But it is not changing. Even i have used the cls and put the style code there. Plz help me out.


Ext.onReady(function(){
var tabs = new Ext.TabPanel({
id:'tabpanel',
renderTo: 'toolbar',
activeTab: 0,

items: [ {
title: 'List',

xtype: 'toolbar',
border: false,
style: 'background-color:red; border:none',



items: [ {
text: 'List1'

},'-',{
text: 'list2'
}
]


}
]
});


});

innovator
22 Oct 2008, 12:10 AM
Hi ,
This is my code, i want a different color for toolbar. But it is not changing. Even i have used the cls and put the style code there. Plz help me out.


Ext.onReady(function(){
var tabs = new Ext.TabPanel({
id:'tabpanel',
renderTo: 'toolbar',
activeTab: 0,

items: [ {
title: 'List',

xtype: 'toolbar',
border: false,
style: 'background-color:red; border:none',



items: [ {
text: 'List1'

},'-',{
text: 'list2'
}
]


}
]
});


});

Hi guys,
still i m stuck to this. Help me out

Condor
22 Oct 2008, 1:11 AM
A toolbar uses a background-image, so only changing the background-color won't work.

Try:

style: 'background:red;border:none;',

innovator
23 Oct 2008, 4:38 AM
A toolbar uses a background-image, so only changing the background-color won't work.

Try:

style: 'background:red;border:none;',
Thanks Condor,
Its working.
When i click on a tab i want to change the color of the tab too.Is it possible to change the color of tab at runtime