startmenu.js

是在ext2.0的基础上开发的一个web桌面系统

Ext.namespace("Ext.ux");
Ext.namespace("Ext.ux.menu");
Ext.ux.menu.StartMenu = function(config) {
	this.events = {
		beforehide:true
	};
	Ext.apply(this,config);
	this.id = this.id || Ext.id();
	Ext.menu.MenuMgr.register(this);
	Ext.ux.menu.StartMenu.superclass.constructor.call(this);
	var tis = this.toolItems;
	this.toolItems = new Ext.util.MixedCollection();
	if(tis){
		this.addTool.apply(this, tis);
	}
};

Ext.extend(Ext.ux.menu.StartMenu,Ext.menu.Menu,{
	shadow: "sides",
	height:300,
	userIconCls: '',
	createEl: function() {
		return new Ext.Layer({
			cls: "x-startmenu x-menu",
			shadow:this.shadow,
			constrain: false,
			parentEl: this.parentEl || document.body,
			zindex:15000
		});
	},
	render: function() {
		if (this.el) {
			return;
		}
		var el = this.el = this.createEl();
		this.keyNav = new Ext.menu.MenuNav(this);
		this.focusEl = el.createChild({
			tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
		});
		if (this.cls) {
			el.addClass(this.cls);
		}
		this.mcID = Ext.id();
		Ext.DomHelper.append(this.el,{
			tag:'div',
			cls:'x-startmenu-tl',
			children: [{
				tag:'div',
				cls:'x-startmenu-tr',
				children:[{
					tag:'div',
					cls:'x-startmenu-tc',
					children: [{
						tag:'div',
						cls:'x-startmenu-header x-startmenu-noborder x-unselectable'+(this.userIconCls != '' ? ' x-panel-icon '+this.userIconCls : ''),
						id: Ext.id(),
						children: [{
							tag:'span',
							cls:'x-startmenu-header-text',
							html:this.headerText
						}]
					}]
				}]
			}]
		});
		Ext.DomHelper.append(this.el,{
			tag:'div',
			cls:'x-startmenu-bwrap',
			children: [{
				tag:'div',
				cls:'x-startmenu-ml',
				children: [{
					tag:'div',
					cls:'x-startmenu-mr',
					children: [{
						id:this.mcID,
						cls:'x-startmenu-mc',
						tag:'div'
					}]
				}]
			},{
				tag:'div',
				style:'height:5px',
				cls:'x-startmenu-bl',
				children: [{
					tag:'div',
					style:'height:5px',
					cls:'x-startmenu-br',
					children: [{
						tag:'div',
						style:'height:5px',
						cls:'x-startmenu-bc'
					}]
				}]
			}]
		});
		this.leftMC = Ext.get(this.mcID).createChild({tag:'div',cls:'x-panel x-noborder-panel ux-startmenu-apps-panel'});
		this.rightMC = Ext.get(this.mcID).createChild({tag:'div',cls:'x-panel x-noborder-panel ux-startmenu-tools-panel'});
		var ul = Ext.get(this.leftMC).createChild({tag:'ul',cls:'x-menu-list'});
		var ul2 = Ext.get(this.rightMC).createChild({tag:'ul',cls:'x-menu-list'});
		ul.on("click", this.onClick, this);
		ul.on("mouseover", this.onMouseOver, this);
		ul.on("mouseout", this.onMouseOut, this);
		ul2.on("click", this.onClick, this);
		ul2.on("mouseover", this.onMouseOver, this);
		ul2.on("mouseout", this.onMouseOut, this);
		this.items.each(function(item){
			var li = document.createElement("li");
			li.className = "x-menu-list-item";
			ul.dom.appendChild(li);
			item.render(li, this);
		}, this);
		this.toolItems.each(function(item){
			var li = document.createElement("li");
			li.className = "x-menu-list-item";
			ul2.dom.appendChild(li);
			item.render(li, this);
		}, this);
        Ext.get(this.mcID).setStyle('position', 'relative');  
        Ext.get(this.mcID).setHeight(this.height);
        
        Ext.get(this.leftMC).setStyle({
        	padding: '2px',
        	position: 'absolute',
        	overflow: 'auto'
        });
        
        Ext.get(this.rightMC).setStyle({
        	padding: '2px 4px 2px 2px',
        	position: 'absolute',
        	overflow: 'auto'
        });

		this.ul = ul;
		this.toolsUl = ul2;
		this.autoWidth();
	},
	hide : function(deep){
		if(this.el && this.isVisible()){
			this.fireEvent("beforehide", this);
			if(this.activeItem){
				this.activeItem.deactivate();
				this.activeItem = null;
			}
			this.el.hide();
			this.hidden = true;
			this.fireEvent("hide", this);
		}
		if(deep === true && this.parentMenu){
			this.parentMenu.hide(true);
		}
	},
	show : function(el, pos, parentMenu){
		this.parentMenu = parentMenu;
		if(!this.el){
			this.render();
		}
		var tPanelWidth = 100;
		var box = Ext.get(this.mcID).getBox();
		console.log(box.width);
		console.log(box.height);
		Ext.get(this.leftMC).setWidth(box.width-tPanelWidth);
		Ext.get(this.leftMC).setHeight(box.height);
		Ext.get(this.rightMC).setWidth(tPanelWidth);
		Ext.get(this.rightMC).setX(box.x+box.width-tPanelWidth);
		Ext.get(this.rightMC).setHeight(box.height);
		this.fireEvent("beforeshow", this);
		this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
	},
	refresh: function() {
		this.removeAll();
		var item = new Ext.menu.Item({icon:'/system/js/ext2.0/resources/images/default/grid/grid-loading.gif',text:'Loading',disabled:true});
		var li = document.createElement("li");
		li.className = "x-menu-list-item";
		ul.dom.appendChild(li);
		item.render(li, this);
		Ext.Ajax.request({url:this.url,params:{}})
	},
	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.addToolText(el);
				}
			}else if(el.tagName || el.el){ // element
				item = this.addToolElement(el);
			}else if(typeof el == "object"){ // must be menu item config?
				Ext.applyIf(el, this.defaults);
				item = this.addToolMenuItem(el);
			}
		}
		return item;
	},
	/**
	 * Adds a separator bar to the menu
	 * @return {Ext.menu.Item} The menu item that was addTooled
	 */
	addToolSeparator : function(){
		return this.addToolItem(new Ext.menu.Separator());
	},

	/**
	 * Adds an {@link Ext.Element} object to the menu
	 * @param {Mixed} el The element or DOM node to addTool, or its id
	 * @return {Ext.menu.Item} The menu item that was addTooled
	 */
	addToolElement : function(el){
		return this.addToolItem(new Ext.menu.BaseItem(el));
	},

	/**
	 * Adds an existing object based on {@link Ext.menu.Item} to the menu
	 * @param {Ext.menu.Item} item The menu item to addTool
	 * @return {Ext.menu.Item} The menu item that was addTooled
	 */
	addToolItem : function(item){
		this.toolItems.add(item);
		if(this.toolsUl){
			var li = document.createElement("li");
			li.className = "x-menu-list-item";
			this.toolsUl.dom.appendChild(li);
			item.render(li, this);
			this.delayAutoWidth();
		}
		return item;
	},

	/**
	 * Creates a new {@link Ext.menu.Item} based an the supplied config object and addTools it to the menu
	 * @param {Object} config A MenuItem config object
	 * @return {Ext.menu.Item} The menu item that was addTooled
	 */
	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);
	},

	/**
	 * Creates a new {@link Ext.menu.TextItem} with the supplied text and addTools it to the menu
	 * @param {String} text The text to display in the menu item
	 * @return {Ext.menu.Item} The menu item that was addTooled
	 */
	addToolText : function(text){
		return this.addToolItem(new Ext.menu.TextItem(text));
	},
    findTargetItem : function(e){
        var t = e.getTarget(".x-menu-list-item", this.ul,  true);
		console.log(t);
		if (!t) { t = e.getTarget(".x-menu-list-item", this.toolsUl,  true); }
        if(t && t.menuItemId){
            return this.items.get(t.menuItemId) || this.toolItems.get(t.menuItemId);
        }
    }
});