PDA

View Full Version : Some suggestions for the Menu



TommyMaintz
26 Feb 2007, 6:48 AM
Hey Jack and the rest,

While creating a custom menu component i bumped into some minor problems.
I created workarounds for most of them but i think by changing some small things in the menu will help making it more extendible.

Here are my foundings. Probably most of them you already thought of (tefal) and probably I haven't found how i should use it.

One of the things is that in your autoWidth function on Menu doesnt look at minWidth for users not using IE.


autoWidth : function(){
var el = this.el, ul = this.ul;
if(!el){
return;
}
var w = this.width;
if(w){
el.setWidth(w);
}else if(Ext.isIE){
el.setWidth(this.minWidth);
........

This is how I worked around it:


var m = aToolbarButton.menu;
m.width = 131;


Dont know if this is the wanted behaviour (It probably is for a good reason), but I wanted to note it anyway.

Secondly it would be nice to be able to choose from wich element the submenus will expand for a whole menu.

This is how I had to do this now:


var m = aToolbarButton.menu;
var items = m.items.items, l = items.length;
for(var i = 0; i < l; i++){
var item = items[i];

var im = item.menu;

item.subMenuFrom = m.getEl();
item.expandMenu = function(autoActivate){
var el = this.subMenuFrom || this.container;
if(!this.disabled && this.menu){
if(!this.menu.isVisible()){
this.menu.show(el, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
}
if(autoActivate){
this.menu.tryActivate(0, 1);
}
}
};
}


So what I'm saying is that it would be a good idea to give a menu item a config property called subMenuFrom and change .expandMenu to check if you configured the property, or that it should use the default.

Last, I think it would be nice to be able to set the shadow property for a menu at once.

All by all, this is the whole block of code I used to do this all, but I think this could be alot smaller if some changes to the Menu would be applied (or if I knew how the menu works better)


var m = newBtn.menu;
m.shadow = false;
m.width = 131;

mel = m.getEl();
mel.addClass('x-menubar-block-menu-left');
m.autoWidth();

var items = m.items.items, l = items.length;
for(var i = 0; i < l; i++){
var item = items[i];

var im = item.menu;
im.width = 130;
im.shadow = false;
im.getEl().addClass('x-menubar-block-menu-right');

item.subMenuFrom = newBtn.menu.getEl();
item.expandMenu = function(autoActivate){
var el = this.subMenuFrom || this.container;
if(!this.disabled && this.menu){
if(!this.menu.isVisible()){
this.menu.show(el, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
}
if(autoActivate){
this.menu.tryActivate(0, 1);
}
}
};
}

newBtn.el.child('img', true).src = icon;
},


Thanks for your time, as allways!

Zuni
5 May 2007, 4:38 AM
As you pointed out, menu minWidth was not working for non-IE browsers.

at the autoWidth function:



var w = this.width;
if(w)
{
el.setWidth(w);
}
else if(Ext.isIE){
el.setWidth(this.minWidth);
var t = el.dom.offsetWidth;
el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
}


add this:



else
{
if(this.minWidth > el.getWidth())
{
el.setWidth(this.minWidth);
}
}


And you got minWidth working for non-IE too.