one js menu class base on yui-ext and yui

[whouseit]

hi, I've just completed a js menu class base on yui-ext and yui. Because the YAHOO's menu class
is too large and complex, my menu don't rely on it and just a js class especialy bases on yui-ext.
shown below:

menu.js

/**
* @author zsx
* @version 0.1.6
*/

if (!YAHOO.ext.MenuDB) {
YAHOO.ext.MenuDB = {};
YAHOO.ext.MenuDB.menu = [];
YAHOO.ext.MenuDB.menuItem = [];
}

YAHOO.ext.MenuItem = function(config) {
YAHOO.ext.util.Config.apply(this, config);
this.innerElement = document.createElement('span');
};
YAHOO.ext.MenuItem.prototype = {

/**
* @private
* @param {Object} appendTo
* @param {Object} tr
*/
init: function(appendTo, tr) {
if (this.id) {
this.innerElement.id = this.id;
YAHOO.ext.MenuDB.menuItem[this.id] = this;
}
this.disable = (this.disabled === true);
appendTo.appendChild(this.innerElement);
this.el = getEl(tr, true);
this.innerElement.innerHTML = (this.text ? this.text : '');
this.el.mon('click', this.onClick, this, true);
this.el.mon('mouseout', this.onMouseOut, this, true);
this.el.mon('mouseover', this.onMouseOver, this, true);
},
disable : function() {
this.disabled = true;
if(this.el){
this.el.addClass('ymb-item-disabled');
}
},
enable : function() {
this.disabled = false;
if(this.el){
this.el.removeClass('ymb-item-disabled');
}
},
isDisabled : function() {
return this.disabled === true;
},
setDisabled : function(disabled) {
if(disabled){
this.disable();
} else {
this.enable();
}
},
onClick : function(e, scope) {
if(!this.disabled && this.click)
this.click.call(this.scope || window, e, this);
},
onMouseOver : function(e, scope) {
if(!this.disabled){
this.el.addClass('ymb-item-over');
if(this.mouseover){
this.mouseover.call(this.scope || window, e, this);
}
}
},
onMouseOut : function(e, scope) {
if (this.isLabel)
return;
this.el.removeClass('ymb-item-over');
if(!this.disabled){
if(this.mouseout){
this.mouseout.call(this.scope || window, e, this);
}
}
},
addMouseOverClass: function() {
this.el.addClass('ymb-item-over');
},
removeMouseOverClass: function() {
this.el.removeClass('ymb-item-over');
}
};

YAHOO.ext.Menu = function(config) {
YAHOO.ext.util.Config.apply(this, config);
var appendTo = document.body;
var div = document.createElement('div');
div.className = 'ymenubar';
appendTo.appendChild(div);
var tb = document.createElement('table');
tb.boder = 0;
tb.cellPadding = 0;
tb.cellSpacing = 0;
div.appendChild(tb);

var tbody = document.createElement('tbody');
tb.appendChild(tbody);

this.el = getEl(div, true);
this.container = getEl(div, true);
this.container.setVisible(false);
this.tbody = tbody;
this.children = [];
this.menuItems = [];
this.padding_left = 0;
this.padding_bottom = 0;
this.init(config);
};
YAHOO.ext.Menu.prototype = {
init: function(config) {
if (!config)
return;
if (this.id)
YAHOO.ext.MenuDB.menu[this.id] = this;
for (var i = 0; i < config.length; i++) {
var item = config[i];
var isSep = item['separator'];
var isTextItem = item['textItem'];
var subMenu = item['subMenu'];

if (isSep)
this.addSeparator();
else if (isTextItem)
this.addText(item.text);
else if (subMenu)
this.addSubMenu(item);
else
this.addItem(item);
}
},
add: function() {
for (var i = 0; i < arguments.length; i++) {
var el = arguments[i];
var tr = document.createElement('tr');
var td = document.createElement('td');
tr.appendChild(td);
this.tbody.appendChild(tr);

if (el instanceof YAHOO.ext.MenuItem) {
el.init(td, tr);
} else if (el instanceof Array) {
this.addItem(el);
} else if (typeof el == 'string') {
var span = document.createElement('span');
if (el == 'separator') {
span.className = 'ymb-sep';
} else {
span.innerHTML = el;
span.className = 'ymb-span';
}
td.appendChild(span);
} else if (typeof el == 'object') {
td.appendChild(el);
}
}
},
/**
* @public
* @param {Object} config
*/
addItem: function(config) {
if(config instanceof Array){
var items = [];
for (var i = 0, len = config.length; i < len; i++)
items.push(this.addItem(config[i]));
return items;
}

var m = config;
if(!(config instanceof YAHOO.ext.MenuItem)) {
YAHOO.ext.util.Config.apply(config,
{
mouseover: this.onMouseOver,
parent: this
});
m = new YAHOO.ext.MenuItem(config);
}

this.add(m);
this.menuItems.push(m);
return m;
},
addSubMenu:function(config) {
var sub = config['subMenu'];
var subMenu = YAHOO.ext.MenuHelper.createMenu(sub);
YAHOO.ext.util.Config.apply(config,
{
menu: subMenu,
hasChild: true,
isLabel: true
});
var MenuItem = this.addItem(config);
this.children.push(subMenu);
subMenu.label = MenuItem;
},
addSeparator: function() {
var tr = document.createElement('tr');
var td = document.createElement('td');
this.tbody.appendChild(tr);
tr.appendChild(td);
td.className = 'ymb-sep';
},
addText : function(text) {
var tr = document.createElement('tr');
var td = document.createElement('td');
var span = document.createElement('span');
this.tbody.appendChild(tr);
tr.appendChild(td);
td.appendChild(span);
span.className = 'ymb-span';
span.innerHTML = text;
},
removeItem: function(menuItem) {
for (var i = 0; i < this.menuItems.length; i++) {
var tmp = this.menuItems[i];
if (!tmp)
continue;
if (menuItem == tmp) {
this.tbody.removeChild(menuItem.el.dom);
this.menuItems.splice(i, 1);
break;
}
}
},
onMouseOver: function(e, o) {
var menu = o.parent;
var oTarget = e.getTarget();
for (var i = 0; i < menu.menuItems.length; i++) {
var item = menu.menuItems[i];
if (item instanceof YAHOO.ext.MenuItem) {
if (item.menu)
YAHOO.ext.MenuHelper.hideMenu({menu: item.menu});
}
var el = getEl(item);
if (el && oTarget != el.dom && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
if (item.isLabel)
item.removeMouseOverClass();
}
}
if (o.menu) {
if (o.menu.label)
o.menu.label.addMouseOverClass();
YAHOO.ext.MenuHelper.openMenu(o);
}
},
onClick : function(e, o) {
var oTarget = e.getTarget();
var el = getEl(o['id']);
if (el.dom != oTarget
&& !YAHOO.util.Dom.isAncestor(el.dom, oTarget)
&& !YAHOO.util.Dom.isAncestor(this['menu'].dom, oTarget)) {
this['menu'].hideAll();
}
},
showAt: function(el, hasChild) {
var menu = getEl(this.container);
var el = getEl(el);
var bottom = el.getBottom(false);
var left = el.getLeft(false);

left += this.padding_left;
bottom += this.padding_bottom;

if (hasChild) {
left = el.getRight(false);
bottom -= el.getHeight(false);
}
var viewWidth = YAHOO.util.Dom.getViewportWidth();
var myWidth = this.container.getWidth(false);
if (left + myWidth > viewWidth)
left = el.getLeft(false) - myWidth;

var viewHeight = YAHOO.util.Dom.getViewportHeight();
var myHeight = this.container.getHeight(false);
if (bottom + myHeight > viewHeight)
bottom = el.getBottom(false) - myHeight;

menu.setXY([left, bottom]);
menu.setVisible(true);
},
showAtPos: function(pos) {
var menu = getEl(this.container);
var left = pos[0];
var bottom = pos[1];

left += this.padding_left;
bottom += this.padding_bottom;

var viewWidth = YAHOO.util.Dom.getViewportWidth();
var myWidth = this.container.getWidth(false);
if (left > viewWidth)
left = viewWidth - myWidth;
else if (left + myWidth > viewWidth)
left = left - myWidth;

var viewHeight = YAHOO.util.Dom.getViewportHeight();
var myHeight = this.container.getHeight(false);
if (bottom > viewHeight)
bottom = viewHeight - myHeight;
else if (bottom + myHeight > viewHeight)
bottom = bottom - myHeight;

menu.setXY([left, bottom]);
menu.setVisible(true);
},
hide: function() {
var menu = getEl(this.container);
menu.setVisible(false);
},
hideAll: function() {
for (var i = 0; i < this.children.length; i++) {
var subMenu = this.children[i];
if (subMenu.label)
subMenu.label.removeMouseOverClass();
if (subMenu.children.length > 0 && subMenu.children[i].isVisible())
subMenu.children[i].hideAll();
subMenu.hide();
}
this.hide();
},
isVisible: function() {
var menu = getEl(this.container);
return menu.isVisible();
},
setPaddingLeft: function(num) {
this.padding_left = num;
},
setPaddingBottom: function(num) {
this.padding_bottom = num;
}
};

YAHOO.ext.MenuMon = function(config) {
this.doc = getEl(document.body);
this.wrappedFn = null;
YAHOO.ext.util.Config.apply(this, config);
};

YAHOO.ext.MenuMon.prototype = {
onDocumentClick : function(e) {
if (!this.id) {
if (this.menu.isVisible())
this.menu.hideAll();
return;
}
var el = getEl(this.id, true);
if (!el || !el.dom) {
if (this.menu.isVisible())
this.menu.hideAll();
return;
}
var oTarget = e.getTarget();
if (el.dom != oTarget && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
if (this['menu'].isVisible())
this['menu'].hideAll();
}
// alert('click doc, fn=' + this.wrappedFn); //just for debug
if (this.wrappedFn) {
// this.doc.removeListener('click', this.onDocumentClick, this);
// this.doc.removeListener('click', this.wrappedFn, this);
// YAHOO.ext.EventManager.removeListener(this.doc.dom, 'click', this.wrappedFn);
this.wrappedFn = null;
}
},
setClick: function(){
if (this.clickSet)
return;
this.clickSet = true;
this.wrappedFn = this.doc.mon('click', this.onDocumentClick, this, true);
}
};

YAHOO.ext.MenuHelper = new function() {
this.openMenu = function(o) {
var m = o['menu'];
if (!m || !(m instanceof YAHOO.ext.Menu))
return;
m.showAt(o['id'], o['hasChild']);
if (!o.oMon) {
o.oMon = new YAHOO.ext.MenuMon(o);
o.oMon.setClick();
}
};
this.openMenuAt = function(o) {
var m = o.menu;
if (!m || !(m instanceof YAHOO.ext.Menu))
return;
var el = getEl(m, true);
m.showAtPos(o['pos']);
if (!o.oMon) {
o.oMon = new YAHOO.ext.MenuMon(o);
o.oMon.setClick();
}
};
this.setupContentMenu = function(o) {
if (!o || !o.menu) {
alert('please check you menu config!')
return;
}
var container = o.container;
if (!container)
container = document.body;
var element = document.createElement('div');

container = getEl(container);

function onDocRightClick(e) {
var pos = e.getXY();
YAHOO.ext.util.Config.apply(o, {pos: pos});
this.openMenuAt(o);
e.preventDefault();
};
container.mon('contextmenu', onDocRightClick, this, true);
};
this.hideMenu = function(o) {
o.menu.hideAll();
};
this.createMenu = function(config) {
if (!(config instanceof Array))
return;
var m = new YAHOO.ext.Menu(config);
return m;
};
this.registerMenu = function(id, m) {
if (m instanceof YAHOO.ext.Menu)
YAHOO.ext.MenuDB.menu[id] = m;
};
this.removeMenu = function(id) {
var menu = YAHOO.ext.MenuDB.menu[id];
if (menu && menu.el && menu.el.dom) {
menu.el.dom.parentNode.removeChild(menu.el.dom);
YAHOO.ext.MenuDB.menu[id] = null;
}
};
this.removeMenuItem = function(id) {
var item = YAHOO.ext.MenuDB.menuItem[id];
if (item && item.el && item.el.dom) {
item.parent.removeItem(item);
YAHOO.ext.MenuDB.menuItem[id] = null;
}
};
}();


menu.css

.ymenubar{
z-index:1000;
visibility:hidden;
background-color: #D5E7FF;
border: 1px solid #cbc7b8;
padding:2px;
padding: 1px 2px 1px 2px;
position: absolute;
display: block;
border-width:1px;
border-color:rgb(192,192,192) black black rgb(192,192,192);
}

.ymenubar table,.ymenubar tbody.ymenubar tr,.ymenubar td,.ymenubar div{
font:normal 8pt tahoma, helvetica, arial, sans-serif;
padding:4px 0px;
}

.ymenubar span {
font:normal 8pt tahoma, helvetica, arial, sans-serif;
padding:4px 20px;
}

.ymenubar .ymb-text{
font:normal 8pt tahoma, helvetica, arial, sans-serif;
padding:4px 0px;
}

.ymenubar .ymb-sep2{
height: 1px;
background: blue;
background-repeat: no-repeat;
}
.ymenubar .ymb-sep{
background-image: url(../images/menu_sep.gif);
background-position: center;
background-repeat: repeat-x;
display: block;
cursor:default;
height: 16px;
padding-left: 0px;
}

.ymenubar .ymb-item-over{
background-color:#0D2A72;
color: #ffffff;
cursor: default;
}

[whouseit]

demo.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>"menu example"</title>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/yahoo.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/event.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/dom.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/container_core.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/dragdrop.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/connection.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui/animation.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/yui-ext/yui-ext.js"></script>
<script language="JavaScript" type="text/javascript" src="../base/js/ie-bg.js"></script>

<script language="JavaScript" type="text/javascript" src="../base/js/yutil-min.js"></script>
<script language="JavaScript" type="text/javascript" src="menu.js"></script>
<script language="JavaScript" type="text/javascript" src="demo_en.js"></script>
<link rel="stylesheet" type="text/css" href="../base/resources/css/grid.css"/>
<link rel="stylesheet" type="text/css" href="../base/resources/css/toolbar.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="../base/resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../base/resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="../base/resources/css/resizable.css">
<link rel="stylesheet" type="text/css" href="../base/resources/css/basic-dialog.css">
<link rel="stylesheet" type="text/css" href="../base/resources/css/reset-min.css">
<link rel="stylesheet" type="text/css" href="../base/resources/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../base/resources/css/container/container.css">
</head>
<body>
<div id="menu"></div>
<div id="header-panel"></div>
<div id="menu-panel">
<div id="tool-bar" class="mso"></div>
<div id="menu-bar"></div>
</div>
<div id="tmp_id" value="hi, me"></div>
</body>
</html>

[whouseit]

demo_en.js:

function openFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id']);
};
function newFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id']);
};
function saveFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id']);
};
function closeFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id']);
};
fileMenuConfig = [
{ id: 'open', text: 'open', click: openFn},
{ id: 'new', text: 'new', click: newFn},
{ separator: true },
{ id: 'save', text: 'save', click: saveFn},
{ id: 'close', text: 'close', click: closeFn},
{ separator: true },
{ textItem: true, text: 'quit'},
{
id: 'selectsub20',
text: 'open&nbsp>>',
subMenu:
[
{id: 'select21', text: 'open'},
{id: 'select21', text: 'new'},
{id: 'select21', text: 'close'},
{ separator: true},
{id: 'select', text: 'copy'},
{id: 'select', text: 'cut'},
{id: 'select', text: 'paste'},
{textItem: true, text: 'help'}
]
},
{
id: 'selectsub21',
text: 'open&nbsp>>',
subMenu:
[
{id: 'select21', text: 'open'},
{id: 'select21', text: 'new'},
{id: 'select21', text: 'close'},
{ separator: true},
{id: 'select', text: 'copy'},
{id: 'select', text: 'cut'},
{id: 'select', text: 'paste'},
{textItem: true, text: 'help'}
]
}
];

function delMenuItemFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id'] + '; delItem=' + oItem['delItem']);
YAHOO.ext.MenuHelper.removeMenuItem(oItem.delItem);
};
function delMenuFn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id'] + '; delItem=' + oItem['delItem']);
YAHOO.ext.MenuHelper.removeMenu(oItem.delItem);
};
editMenuConfig = [
{ id: 'copy', text: 'copy'},
{ id: 'cut', text: 'cut'},
{ separator: true },
{ id: 'paste', text: 'paste'},
{ separator: true },
{ id: 'delete', text: 'delete copy', click: delMenuItemFn, delItem: 'copy'},
{ id: 'delete_menu1', text: 'delete lastmenu', click: delMenuFn, delItem: 'menubar'},
{ id: 'delete_menu2', text: 'delete other3', click: delMenuItemFn, delItem: 'other3'},
{ separator: true },
{ id: 'delete_menu3', text: 'delete file', click: delMenuFn, delItem: 'file_menu'}
];
helpMenuConfig = [
{ id: 'about', text: 'about'},
{ id: 'help', text: 'help'}
];

function clickMeFn(e, o) {
alert('hello, click me, text=' + o['text']);
};

posMenuConfig = [
{ id: 'about&', text: 'about'},
{ id: 'help&', text: 'help'},
{ separator: true },
{
id: 'about1',
text: 'other &nbsp&nbsp >>',
subMenu:
[
{ id: 'about11', text: 'other1'},
{ id: 'about11', text: 'other1'},
{ id: 'about11', text: 'other1'},
{ separator: true },
{ id: 'about11', text: 'other1'},
{ id: 'about11', text: 'other1'},
{
id: 'other2',
text: 'other2 &nbsp&nbsp >>',
subMenu:
[
{id: 'other22', text: 'other24, click me', click: clickMeFn},
{id: 'other22', text: 'other22'},
{id: 'other22', text: 'other22'},
{id: 'other22', text: 'other22'},
{
id: 'other3',
text: 'other3 >>>',
subMenu:
[
{id: 'other31', text: 'other31'},
{id: 'other31', text: 'other31'},
{id: 'other31', text: 'other31'},
{id: 'other31', text: 'other31'},
{id: 'other31', text: 'other31'}
]
}
]
}
]
}
];

pos2MenuConfig = [
{ id: 'pos20', text: 'about'},
{ id: 'pos21', text: 'help'},
{ separator: true },
{
id: 'pos22',
text: 'other &nbsp&nbsp >>',
subMenu:
[
{ id: 'pos220', text: 'other1'},
{ id: 'pos221', text: 'other1'},
{ id: 'pos222', text: 'other1'},
{ separator: true },
{ id: 'pos223', text: 'other1'},
{ id: 'pos224', text: 'other1'},
{
id: 'pos225',
text: 'other2 &nbsp&nbsp >>',
subMenu:
[
{id: 'pos2250', text: 'other22 click me', click: clickMeFn},
{id: 'pos2251', text: 'other22'},
{id: 'pos2252', text: 'other22'},
{id: 'pos2253', text: 'other22'},
{
id: 'pos2254',
text: 'other3 >>>',
subMenu:
[
{id: 'pos22540', text: 'other31'},
{id: 'pos22541', text: 'other31'},
{id: 'pos22542', text: 'other31'},
{id: 'pos22543', text: 'other31'},
{id: 'pos22544', text: 'other31'}
]
}
]
}
]
}
];

contentMenuConfig = [
{ id: 'right', text: 'about'},
{ id: 'right0', text: 'help'},
{ separator: true },
{
id: 'right1',
text: 'other &nbsp&nbsp >>',
subMenu:
[
{ id: 'right11', text: 'other1'},
{ id: 'right11', text: 'other1'},
{ id: 'right11', text: 'other1'},
{ separator: true },
{ id: 'right11', text: 'other1'},
{ id: 'right11', text: 'other1'},
{
id: 'right12',
text: 'right12 &nbsp&nbsp >>',
subMenu:
[
{id: 'right22', text: 'other24, click me', click: clickMeFn},
{id: 'right22', text: 'other22'},
{id: 'right22', text: 'other22'},
{id: 'right22', text: 'other22'},
{
id: 'right3',
text: 'right3 >>>',
subMenu:
[
{id: 'right31', text: 'other31'},
{id: 'right31', text: 'other31'},
{id: 'right31', text: 'other31'},
{id: 'right31', text: 'other31'},
{id: 'right31', text: 'other31'}
]
}
]
}
]
}
];
function item4Fn(e, oItem) {
alert('text=' + oItem['text'] + '; id=' + oItem['id']);
};

function createMenu1(){
var m = new YAHOO.ext.Menu({id: 'menubar'});
m.addItem({id: 'item1', text: 'item1', group: 'menu4test1'});
m.addItem({id: 'item2', text: 'item2', group: 'menu4test1'});
m.addItem({id: 'item3', text: 'item3', group: 'menu4test1'});
m.addItem({id: 'item4', text: 'item4 click me', click: item4Fn, group: 'menu4test1'});
m.addItem([{id: 'item5', text: 'item5', group: 'menu4test1'},
{id: 'item6', text: 'item6', group: 'menu4test1'}]);
m.addText('test text');
m.add(
'separator',
[{id: 'item7', text: 'item7'}],
[{id: 'item8', text: 'item8'}],
[{id: 'item9', text: 'item9 click me', click: function(e, o){alert('id=' + o.id + '; text=' + o.text)}}],
'separator',
'text test',
'text test'
);
m.hide();
return m;
};

var MenuViewer = function(){
var layout, north, center, statusPanel;
var toolbar;

return {
init: function(){
this.menu = null;
layout = new YAHOO.ext.BorderLayout(document.body,{
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
center: {
titlebar: true,
autoScroll:false,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false,
resizeTabs: true
}});
layout.beginUpdate();
layout.add('north',
new YAHOO.ext.ContentPanel('header-panel',
{
title: 'Navigation',
fitToFrame:true,
closable:false
}));

var m1 = YAHOO.ext.MenuHelper.createMenu(fileMenuConfig);
YAHOO.ext.MenuHelper.registerMenu('file_menu', m1);
var m2 = YAHOO.ext.MenuHelper.createMenu(editMenuConfig);
var m3 = YAHOO.ext.MenuHelper.createMenu(helpMenuConfig);
var m4 = YAHOO.ext.MenuHelper.createMenu(posMenuConfig);
var tb = new YAHOO.ext.Toolbar('tool-bar');
tb.add([{id: 'file_menu_bt', text: 'File', click: YAHOO.ext.MenuHelper.openMenu, menu: m1}],
'separator',
[{id: 'edit_menu_bt', text: 'Edit', click: YAHOO.ext.MenuHelper.openMenu, menu: m2}],
'separator',
[{id: 'help_menu_bt', text: 'Help', click: YAHOO.ext.MenuHelper.openMenu, menu: m3}],
'separator',
[{id: 'test4_bt', pos: [800, 200], text: 'Click&amp;SetPos', click: YAHOO.ext.MenuHelper.openMenuAt, menu: m4}]
);
tb.addSeparator();

var m5 = createMenu1();
var b = tb.addButton({id: 'last_bt', text: 'lastmenu', click: YAHOO.ext.MenuHelper.openMenu, menu: m5});

var conf = [ 'value1', 'value2', 'value3'];
center = new YAHOO.ext.ContentPanel('menu-panel',
{
title: "menuPanel",
toolbar: tb,
fitToFrame:true
});
layout.add('center', center);
layout.restoreState();
layout.endUpdate();

var m6 = YAHOO.ext.MenuHelper.createMenu(pos2MenuConfig);
YAHOO.ext.MenuHelper.openMenuAt({id: 'text7', pos: [200, 200], text: 'view test', menu: m6});

var m7 = YAHOO.ext.MenuHelper.createMenu(contentMenuConfig);
var doc = getEl(document.body);
YAHOO.ext.MenuHelper.setupContentMenu({id: 'testrightclick', menu: m7});
}
};
}();

//YAHOO.ext.EventManager.onDocumentReady(MenuViewer.init, MenuViewer, true);
YAHOO.util.Event.on(window, 'load', MenuViewer.init, MenuViewer, true);

[whouseit]

Jack, in my 'YAHOO.ext.util.menuMon' class, I use YAHOO.ext.Element.prototype.mon()
to monitor the document's click event. But I don't want to invoke the class evey time
when document's click occur. I don't find the function to remove event handle register
by use 'YAHOO.ext.Element.prototype.mon()'. Can you give one function for it?
Thanks
zsx

[tryanDLS]

Can't you just call removeListener , passing the wrappedFn returned by mon?

[whouseit]

Can't you just call removeListener , passing the wrappedFn returned by mon?
I changed my code shown below, but still don't remove the listener:

YAHOO.ext.util.menuMon.prototype = {
onDocumentClick : function(e) {
if (!this.id) {
if (this.menu.isVisible())
this.menu.hideAll();
return;
}
var el = getEl(this.id, true);
if (!el || !el.dom) {
if (this.menu.isVisible())
this.menu.hideAll();
return;
}
var oTarget = e.getTarget();
if (el.dom != oTarget && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
if (this['menu'].isVisible())
this['menu'].hideAll();
}
alert('click doc now'); //just for debug
if (this.wrappedFn) {
this.doc.removeListener('click', this.wrappedFn, this);
this.wrappedFn = null;
}
},
setClick: function(){
if (this.clickSet)
return;
this.clickSet = true;
this.wrappedFn = this.doc.mon('click', this.onDocumentClick, this, true);
}
};

[mscifo]

whouseit

I tried using your code and I got a couple javascript errors in menu.js...

missing ; after for-loop condition
menu.js (line 204)
for (var i = 0; i <menu> viewWidth)

missing ; after for-loop condition
menu.js (line 241)
for (var i = 0; i <this> 0 && subMenu.children[i].isVisible())

I tried to fix it but I'm having trouble determining what you are trying to do with those for loops.

Can you please take a look?

[whouseit]

Hi, I'm sorry about it. It's my fault. When I posted the codes I don't set
'Disable HTML in this post', so my codes were changed. Now it should be
OK

[mscifo]

Thanks, works now.