ModuleMenu component. Need help

[TommyMaintz]

Hey guys,

Im trying to create a kind of customized menu for browsing different modules.
Its going to look something like this
http://85.146.0.228/components/componentblock.png

The part with compose etc it it will be shown only if you hover your mouse over for example the mail "baseitem". The subitems at the bottom right will only show if you hover your mouse over one of the items in the bottomleft. Well, the picture says enough i guess.

I want to be able to create a modulemenu something like this:


var ModuleMenu = new Ext.modulemenu.ModuleMenu({
items: [
{
icon: 'mail2.png',
title: 'Mail',
subtitle: 'centre',
items: [
{
icon: 'mail_new.png',
title: 'Compose',
items: [
{title: 'subitem 1'},
{title: 'subitem 2'},
{title: 'subitem 3'}
]
}, {
icon: 'users.png',
title: 'Compose',
items: [
{title: 'subitem 1'},
{title: 'subitem 2'},
{title: 'subitem 3'}
]
}
]
}
]
});

new Ext.modulemenu.ModuleMenuBlock('communication', {title: 'Communication'});


I created ModuleMenuBlock wich looks like this:


Ext.modulemenu.ModuleMenuBlock = function(renderTo, config){
config = config || {};
if(typeof config == 'string'){
this.title = config;
}else{
Ext.apply(this, config);
}

if(renderTo) {
this.render(renderTo, config);
}
};


Ext.extend(Ext.modulemenu.ModuleMenuBlock, Ext.util.Observable, {
render : function(renderTo, config) {
this.el = Ext.get(renderTo, true);
if(!this.el && config && config.autoCreate){
if(typeof config.autoCreate == 'object'){
if(!config.autoCreate.id){
config.autoCreate.id = el;
}
this.el = Ext.DomHelper.append(document.body,
config.autoCreate, true);
}else{
this.el = Ext.DomHelper.append(document.body,
{tag: 'div', cls: 'x-nav-menu', id: el}, true);
}
}

var wrap = this.el.wrap({cls: 'x-nav-block'});

if(this.title) {
var tpl = new Ext.Template(
'<div class="x-nav-block-hd">',
'<p class="x-nav-block-hd-left"></p>{0:capitalize}<p class="x-nav-block-hd-right"></p>',
'</div>'
);
var hd = tpl.insertBefore(this.el.dom, [this.title], true);
hd.unselectable();
this.hdEl = hd;
}

this.menuEl = this.el;
this.el = wrap;

//this.menuEl.appendChild(this.menu.dom);
}
});


You can check what i have already here
http://85.146.0.228/components/modulemenu/

My question is. What component from Ext do you think i should use to create the customized menu.
I was thinking about the Menu component and change its behaviour for this particular situation but i dont really know where to start.

Hope somebody knows a good way for me to start.

[jack.slocum]

Personally I would use a toolbar and wired up mouseover/out events and then use menus. You can customize the look with css.