我在Extjs中例子desktop中StartMenu.js的注释

 

/*!

 * Ext JS Library 3.2.1

 * Copyright(c) 2006-2010 Ext JS, Inc.

 * licensing@extjs.com

 * http://www.extjs.com/licensetoolsPanel

 */

/**

 * @class Ext.ux.StartMenu

 * @extends Ext.menu.Menu

 * A start menu object.

 * @constructor

 * Creates a new StartMenu

 * @param {Object} config Configuration options

 *

 * SAMPLE USAGE:

 *

 * this.startMenu = new Ext.ux.StartMenu({

 * iconCls: 'user',

 * height: 300,

 * shadow: true,

 * title: get_cookie('memberName'),

 * width: 300

 * });

 *

 * this.startMenu.add({

 * text: 'Grid Window',

 * iconCls:'icon-grid',

 * handler : this.createWindow,

 * scope: this

 * });

 *

 * this.startMenu.addTool({

 * text:'Logout',

 * iconCls:'logout',

 * handler:function(){ window.location = "logout.php"; },

 * scope:this

 * });

 */

 

Ext.namespace("Ext.ux");

 

Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {

    initComponent: function(config) {

     Ext.ux.StartMenu.superclass.initComponent.call(this, config);//相当于super.initComponent(config);

 

        var tools = this.toolItems;

        this.toolItems = new Ext.util.MixedCollection();//相当于hashMap,多了些filter功能

        if(tools){

            this.addTool.apply(this, tools);//addTool方法传入??不太明白

        }

    },

 

    // private

    onRender : function(ct, position){

        Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);

        var el = this.el.addClass('ux-start-menu');

 

        var header = el.createChild({//调ext-core.js包中createChild方法创建Ext.Element的div;

         tag: "div",

         cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls

        });

 

        this.header = header;

 

var headerText = header.createChild({//然后又在上面那个div下创建span

tag: "span",

cls: "x-window-header-text"

});

var tl = header.wrap({

cls: "ux-start-menu-tl"

});

var tr = header.wrap({//.wrap是做什么用的呢？经查：wrap：在当前节点外绑定一个由DomHelper创建的父节点

cls: "ux-start-menu-tr"

});

var tc = header.wrap({

cls: "ux-start-menu-tc"

});

 

this.menuBWrap = el.createChild({

tag: "div",

cls: "x-window-body x-border-layout-ct ux-start-menu-body"

});

var ml = this.menuBWrap.wrap({

cls: "ux-start-menu-ml"

});

var mc = this.menuBWrap.wrap({

cls: "x-window-mc ux-start-menu-bwrap"

});

 

this.menuPanel = this.menuBWrap.createChild({

tag: "div",

cls: "x-panel x-border-panel ux-start-menu-apps-panel"

});

this.toolsPanel = this.menuBWrap.createChild({

tag: "div",

cls: "x-panel x-border-panel ux-start-menu-tools-panel"

});

 

var bwrap = ml.wrap({cls: "x-window-bwrap"});

var bc = bwrap.createChild({

tag: "div",

cls: "ux-start-menu-bc"

});

var bl = bc.wrap({

cls: "ux-start-menu-bl x-panel-nofooter"

});

var br = bc.wrap({

cls: "ux-start-menu-br"

});

 

        this.ul.appendTo(this.menuPanel);//Ext-all.js中el = Ext.Layer；layer中有{tag: 'ul', cls: 'x-menu-list'}，所以 ul = this.el.child('ul.x-menu-list');

 

        var toolsUl = this.toolsPanel.createChild({//toolsPanel下也创建1个ul.x-menu-list

         tag: "ul",

         cls: "x-menu-list"

        });

 

        this.mon(toolsUl, 'click', this.onClick, this);

        this.mon(toolsUl, 'mouseover', this.onMouseOver, this);

        this.mon(toolsUl, 'mouseout', this.onMouseOut, this);

 

        this.items.each(function(item){

            item.parentMenu = this;

        }, this);

 

        this.toolItems.each(

         function(item){

           var li = document.createElement("li");

           li.className = "x-menu-list-item";

           toolsUl.dom.appendChild(li);

           item.render(li);

                item.parentMenu = this;

       }, this);

 

        this.toolsUl = toolsUl;

 

        this.menuBWrap.setStyle('position', 'relative');

        this.menuBWrap.setHeight(this.height - 28);

 

        this.menuPanel.setStyle({

         padding: '2px',

         position: 'absolute',

         overflow: 'auto'

        });

 

        this.toolsPanel.setStyle({

         padding: '2px 4px 2px 2px',

         position: 'absolute',

         overflow: 'auto'

        });

 

        this.setTitle(this.title);

    },

 

    // private

    findTargetItem : function(e){

        var t = e.getTarget(".x-menu-list-item", this.ul,  true);

        if(t && t.menuItemId){

         if(this.items.get(t.menuItemId)){

             return this.items.get(t.menuItemId);

            }else{

             return this.toolItems.get(t.menuItemId);

            }

        }

    },

 

    /**

     * Displays this menu relative to another element

     * @param {Mixed} element The element to align to

     * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to

     * the element (defaults to this.defaultAlign)

     * @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)

     */

    show : function(el, pos, parentMenu){

        this.parentMenu = parentMenu;

        if(!this.el){

            this.render();

        }

 

        this.fireEvent("beforeshow", this);

        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);

        var tPanelWidth = 100;

        var box = this.menuBWrap.getBox();

        this.menuPanel.setWidth(box.width-tPanelWidth);

        this.menuPanel.setHeight(box.height);

 

        this.toolsPanel.setWidth(tPanelWidth);

        this.toolsPanel.setX(box.x+box.width-tPanelWidth);

        this.toolsPanel.setHeight(box.height);

    },

 

    addTool : function(){

        var a = arguments, l = a.length, item;

        for(var i = 0; i < l; i++){

            var el = a[i];

            if(el.render){ // some kind of Item

                item = this.addToolItem(el);

            }else if(typeof el == "string"){ // string

                if(el == "separator" || el == "-"){

                    item = this.addToolSeparator();

                }else{

                    item = this.addText(el);

                }

            }else if(el.tagName || el.el){ // element

                item = this.addElement(el);

            }else if(typeof el == "object"){ // must be menu item config?

                item = this.addToolMenuItem(el);

            }

        }

        return item;

    },

 

    /**

     * Adds a separator bar to the Tools

     * @return {Ext.menu.Item} The menu item that was added

     */

    addToolSeparator : function(){

        return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'}));

    },

 

    addToolItem : function(item){

        this.toolItems.add(item);

        if(this.ul){

            var li = document.createElement("li");

            li.className = "x-menu-list-item";

            this.ul.dom.appendChild(li);

            item.render(li, this);

            this.delayAutoWidth();

        }

        return item;

    },

 

    addToolMenuItem : function(config){

        if(!(config instanceof Ext.menu.Item)){

            if(typeof config.checked == "boolean"){ // must be check menu item config?

                config = new Ext.menu.CheckItem(config);

            }else{

                config = new Ext.menu.Item(config);

            }

        }

        return this.addToolItem(config);

    },

 

    setTitle : function(title, iconCls){

        this.title = title;

        this.header.child('span').update(title);

        return this;

    }

});