From Learn About the Ext JavaScript Library

Contents 1 Description 2 Usage 3 Changelog 4 Screenshots

Description

This widget extends the Ext Toolbar and adds Windows Menu-like behavior. Once you've "activated" the menu Toolbar by clicking an item it will stay open until you select an item (or somewhere else on the page). As long as it's open hovering items will expand them.

See the demo for the latest source.

Usage

Ext.onReady(function() {
 
    ExampleMenuBar = new Ext.ux.Menubar({
        orientation: "horizontal"
    });
 
    ExampleMenuBar.add(
        new Ext.menu.Item({
            text: 'Home',
            href:"#home"
         }),        
        new Ext.menu.Item({
            hideOnClick : false,
            text: 'Sample Menu',menu : new Ext.menu.Menu({items: [
                {href:"#Company",text:"Companies"},
                {href:"#Component",text:"House Components"},
                {href:"#PlayerType",text:"Player Types"}
        ]})})
    );    
    ExampleMenuBar.show(Ext.get("container-menubar"), "tl-tl");
 
});

Changelog

v0.5.1 Fixed some small issues.
v0.5 Updated namespace to Ext.ux, down-arrow hidden when there are no subitems
v0.4 Changed css to make it work in containers as well, Improved mouseover functionality (mimic XP menu's)
v0.3 Changed onclick handler to fix items without submenu.
v0.2 Various css and behavioural fixes gathered from forum thread (timb, medusadelft)
v0.1 Animal's initial design

Screenshots