X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/desktop/js/StartMenu.js diff --git a/examples/desktop/js/StartMenu.js b/examples/desktop/js/StartMenu.js index ebd23b7a..15edb335 100644 --- a/examples/desktop/js/StartMenu.js +++ b/examples/desktop/js/StartMenu.js @@ -1,11 +1,9 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ /** * @class Ext.ux.StartMenu * @extends Ext.menu.Menu @@ -41,35 +39,29 @@ Ext.namespace("Ext.ux"); -Ext.ux.StartMenu = function(config){ - Ext.ux.StartMenu.superclass.constructor.call(this, config); - - var tools = this.toolItems; - this.toolItems = new Ext.util.MixedCollection(); - if(tools){ - this.addTool.apply(this, tools); - } -}; +Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, { + initComponent: function(config) { + Ext.ux.StartMenu.superclass.initComponent.call(this, config); -Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { - // private - render : function(){ - if(this.el){ - return; + var tools = this.toolItems; + this.toolItems = new Ext.util.MixedCollection(); + if(tools){ + this.addTool.apply(this, tools); } - var el = this.el = new Ext.Layer({ - cls: "x-menu ux-start-menu", // this might affect item click - shadow:this.shadow, - constrain: false, - parentEl: this.parentEl || document.body, - zindex:15000 - }); - + }, + + // 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" @@ -83,7 +75,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { 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" @@ -94,7 +86,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { 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" @@ -103,7 +95,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { 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", @@ -115,91 +107,51 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { var br = bc.wrap({ cls: "ux-start-menu-br" }); - - this.keyNav = new Ext.menu.MenuNav(this); - if(this.plain){ - el.addClass("x-menu-plain"); - } - if(this.cls){ - el.addClass(this.cls); - } - // generic focus element - this.focusEl = el.createChild({ - tag: "a", - cls: "x-menu-focus", - href: "#", - onclick: "return false;", - tabIndex:"-1" - }); - - var ul = this.menuPanel.createChild({ - tag: "ul", - cls: "x-menu-list"}); + this.ul.appendTo(this.menuPanel); + var toolsUl = this.toolsPanel.createChild({ tag: "ul", cls: "x-menu-list" }); - - var ulListeners = { - "click": { - fn: this.onClick, - scope: this - }, - "mouseover": { - fn: this.onMouseOver, - scope: this - }, - "mouseout": { - fn: this.onMouseOut, - scope: this - } - }; - - ul.on(ulListeners); - - 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.ul = ul; - this.autoWidth(); + 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); - toolsUl.on(ulListeners); - this.toolItems.each( function(item){ var li = document.createElement("li"); li.className = "x-menu-list-item"; toolsUl.dom.appendChild(li); - item.render(li, this); + item.render(li); + item.parentMenu = this; }, this); - + this.toolsUl = toolsUl; - this.autoWidth(); - - this.menuBWrap.setStyle('position', 'relative'); - this.menuBWrap.setHeight(this.height); - + + 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); @@ -227,17 +179,16 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { this.fireEvent("beforeshow", this); this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false); - - var tPanelWidth = 100; + 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++){ @@ -258,7 +209,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { } return item; }, - + /** * Adds a separator bar to the Tools * @return {Ext.menu.Item} The menu item that was added @@ -289,7 +240,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, { } return this.addToolItem(config); }, - + setTitle : function(title, iconCls){ this.title = title; this.header.child('span').update(title);