Extended Menu

[thzero]

My extended menu allows for 2 things:

a) to allow individual menus not to display icons.
b) to allow individual menus to have different themes.

To utilize it, just include the js and css files into your page and then use Ext.ux.MenuEx instead of Ext.menu.Menu. You will also, unfortunately, need to make the change the onMouseDown function of the Ext.menu.MenuMgr to the following otherwise clicking on menu items will not function correctly.


function onMouseDown(e){
if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu-layer")){
hideAll();
}
}


Want to use a different set of menuEx? You modify the x-menuEx* classes, or you could copy the x-menuEx class and give it a prefix different than x-menuEx, i.e. 'x-menuBlue', then set the 'clsPrefix' option of the MenuEx to be 'x-menuBlue' and then menu (and submenus) will use those classes.

Want to not display the 'icon'? Just set the 'showIcon' option to false and no icon will be displayed.

Oops, forgot a feature. You can render the menu to a pre-existing element, i.e.


<div id="sidebarMenu"></div>

<script type="text/javascript">
Ext.onReady(function()
{
var sidebarMenuPanel = new Ext.Panel({
id: 'sidebarMenuPanel',
title: 'Sidebar,
layout:'fit',
contentEl: 'sidebarMenuContent',
renderTo: 'sidebarMenuPanel'
});

var sidebarMenu = new Ext.ux.MenuEx(
{
id: 'sidebarMenu',
clsPrefix: 'x-menuEx',
items: [
{
text: 'Home',
handler: onSidebarMenuItemClick,
location: '/'
},
{
text: 'Get Started Here',
handler: onSidebarMenuItemClick,
location: '/index/start'
},
{
text: 'General Rules and Procedures',
handler: onSidebarMenuItemClick,
location: '/index/rules'
},
{
text: 'Member List',
handler: onSidebarMenuItemClick,
location: '/index/memberlist'
},
{
text: 'Forums',
handler: onSidebarMenuItemClick,
location: '/forum/index'
}]
});
sidebarMenu.renderTo('sidebarMenu');

function onSidebarMenuItemClick(btn)
{
window.location = this.location;
}
});
</script>

[Yossi]

Sounds great, thank you

[sintax.era]

isnt there a way to override the default ext code using a line of code in your script...to fix the bug you mentioned...

Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});

forgive me if I'm completely wrong, I'm pretty new to all of this

[thzero]

I tried it and never got it to work. Perhaps I'll have to experiment some more.

[SilveR316]

Do you have a demo?

[thzero]

Nope, however with the noted additions it works exactly as does the standard Menu.

[thzero]

Well doesn't let me change the original message to remove or overwrite a file, so I'm attaching an updated one here. A change got made to the style sheets as follows:


.x-menuEx a.x-menuEx-item{display:block;line-height:16px;padding:0px 3px 0px 3px;white-space:nowrap;text-decoration:none;color:#222;-moz-outline:0 none;outline:0 none;cursor:pointer;}


becomes


.x-menuEx a.x-menuEx-item{font:normal 11px tahoma,arial,sans-serif;display:block;line-height:16px;padding:0px 3px 0px 3px;white-space:nowrap;text-decoration:none;color:#222;-moz-outline:0 none;outline:0 none;cursor:pointer;}


The "font:normal 11px tahoma,arial,sans-serif" is copied from the .x-menuEx-list-item style. This was need to keep a global "a" style from mucking with the menu's item styling for links.