1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default one js menu class base on yui-ext and yui

    one js menu class base on yui-ext and yui


    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
    Code:
    /**
     * @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
    Code:
    .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;
    }

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default one demo on my js menu

    one demo on my js menu


    demo.html:
    Code:
    <!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>

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default the demo's js

    the demo's js


    demo_en.js:
    Code:
    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);

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default how to remove the 'YAHOO.ext.Element.prototype.mon()' event

    how to remove the 'YAHOO.ext.Element.prototype.mon()' event


    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

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


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

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    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:
    Code:
    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);
    	}
    };

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    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?

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default OK, now

    OK, now


    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

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    Thanks, works now.

Similar Threads

  1. Change Ids by class
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Mar 2007, 12:34 PM
  2. Button with Menu (menu auto show/hide)
    By fafhrd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Mar 2007, 12:19 AM
  3. InlineEditor class
    By masudkuet in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Feb 2007, 7:04 PM
  4. YAHOO.ext.ToolbarMenu class
    By mscifo in forum Community Discussion
    Replies: 17
    Last Post: 25 Jan 2007, 1:34 AM
  5. New in SVN: MessageBox class
    By jack.slocum in forum Community Discussion
    Replies: 13
    Last Post: 2 Jan 2007, 6:16 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."