有关EXTJS desktop的文章

EXTJS自带的一个系统界面菜单 有点类是XP系统的   界面很美观

 自己被吸引 看起来好像不难   自己引用的时候一个报Ext.namespace("Ext.ux"); 未申明实例   不明白什么问题  望高手赐教

/*!
 * Ext JS Library 3.1.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * [e-mail]
 * http://www.extjs.com/license
 */
/**
 * @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);

        var tools = this.toolItems;
        this.toolItems = new Ext.util.MixedCollection();
        if(tools){
            this.addTool.apply(this, tools);
        }
    },

    // 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({
         tag: "div",
         cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls
        });

  this.header = header;

  var headerText = header.createChild({
   tag: "span",
   cls: "x-window-header-text"
  });
  var tl = header.wrap({
   cls: "ux-start-menu-tl"
  });
  var tr = header.wrap({
   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);

        var toolsUl = this.toolsPanel.createChild({
         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;
    }
});