PDA

View Full Version : Extended Menu



thzero
11 Nov 2007, 12:21 PM
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
12 Nov 2007, 3:02 AM
Sounds great, thank you

sintax.era
12 Nov 2007, 11:36 AM
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
13 Nov 2007, 4:36 PM
I tried it and never got it to work. Perhaps I'll have to experiment some more.

SilveR316
14 Nov 2007, 6:52 PM
Do you have a demo?

thzero
14 Nov 2007, 7:33 PM
Nope, however with the noted additions it works exactly as does the standard Menu.

thzero
15 Nov 2007, 2:22 PM
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.