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&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.