Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / examples / desktop / js / StartMenu.js
index ebd23b7..d62a897 100644 (file)
@@ -1,11 +1,9 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 /**\r
  * @class Ext.ux.StartMenu\r
  * @extends Ext.menu.Menu\r
 \r
 Ext.namespace("Ext.ux");\r
 \r
-Ext.ux.StartMenu = function(config){\r
-       Ext.ux.StartMenu.superclass.constructor.call(this, config);\r
-    \r
-    var tools = this.toolItems;\r
-    this.toolItems = new Ext.util.MixedCollection();\r
-    if(tools){\r
-        this.addTool.apply(this, tools);\r
-    }\r
-};\r
+Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {\r
+    initComponent: function(config) {\r
+       Ext.ux.StartMenu.superclass.initComponent.call(this, config);\r
 \r
-Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {\r
-    // private\r
-    render : function(){\r
-        if(this.el){\r
-            return;\r
+        var tools = this.toolItems;\r
+        this.toolItems = new Ext.util.MixedCollection();\r
+        if(tools){\r
+            this.addTool.apply(this, tools);\r
         }\r
-        var el = this.el = new Ext.Layer({\r
-            cls: "x-menu ux-start-menu", // this might affect item click\r
-            shadow:this.shadow,\r
-            constrain: false,\r
-            parentEl: this.parentEl || document.body,\r
-            zindex:15000\r
-        });\r
-        \r
+    },\r
+\r
+    // private\r
+    onRender : function(ct, position){\r
+        Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);\r
+        var el = this.el.addClass('ux-start-menu');\r
+\r
         var header = el.createChild({\r
                tag: "div",\r
                cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls\r
         });\r
+\r
                this.header = header;\r
+\r
                var headerText = header.createChild({\r
                        tag: "span",\r
                        cls: "x-window-header-text"\r
@@ -83,7 +75,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
                var tc = header.wrap({\r
                        cls: "ux-start-menu-tc"\r
                });\r
-               \r
+\r
                this.menuBWrap = el.createChild({\r
                        tag: "div",\r
                        cls: "x-window-body x-border-layout-ct ux-start-menu-body"\r
@@ -94,7 +86,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
                var mc = this.menuBWrap.wrap({\r
                        cls: "x-window-mc ux-start-menu-bwrap"\r
                });\r
-               \r
+\r
                this.menuPanel = this.menuBWrap.createChild({\r
                        tag: "div",\r
                        cls: "x-panel x-border-panel ux-start-menu-apps-panel"\r
@@ -103,7 +95,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
                        tag: "div",\r
                        cls: "x-panel x-border-panel ux-start-menu-tools-panel"\r
                });\r
-               \r
+\r
                var bwrap = ml.wrap({cls: "x-window-bwrap"});\r
                var bc = bwrap.createChild({\r
                        tag: "div",\r
@@ -115,91 +107,51 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
                var br = bc.wrap({\r
                        cls: "ux-start-menu-br"\r
                });\r
-               \r
-        this.keyNav = new Ext.menu.MenuNav(this);\r
 \r
-        if(this.plain){\r
-            el.addClass("x-menu-plain");\r
-        }\r
-        if(this.cls){\r
-            el.addClass(this.cls);\r
-        }\r
-        // generic focus element\r
-        this.focusEl = el.createChild({\r
-            tag: "a",\r
-            cls: "x-menu-focus",\r
-            href: "#",\r
-            onclick: "return false;",\r
-            tabIndex:"-1"\r
-        });\r
-        \r
-        var ul = this.menuPanel.createChild({\r
-               tag: "ul",\r
-               cls: "x-menu-list"});\r
+        this.ul.appendTo(this.menuPanel);\r
+\r
         var toolsUl = this.toolsPanel.createChild({\r
                tag: "ul",\r
                cls: "x-menu-list"\r
         });\r
-        \r
-        var ulListeners = {\r
-               "click": {\r
-                       fn: this.onClick,\r
-                       scope: this\r
-               },\r
-               "mouseover": {\r
-                       fn: this.onMouseOver,\r
-                       scope: this\r
-               },\r
-               "mouseout": {\r
-                       fn: this.onMouseOut,\r
-                       scope: this\r
-               }\r
-        };\r
-        \r
-        ul.on(ulListeners);\r
-        \r
-        this.items.each(\r
-               function(item){\r
-                   var li = document.createElement("li");\r
-                   li.className = "x-menu-list-item";\r
-                   ul.dom.appendChild(li);\r
-                   item.render(li, this);\r
-               }, this);\r
 \r
-        this.ul = ul;\r
-        this.autoWidth();\r
+        this.mon(toolsUl, 'click', this.onClick, this);\r
+        this.mon(toolsUl, 'mouseover', this.onMouseOver, this);\r
+        this.mon(toolsUl, 'mouseout', this.onMouseOut, this);\r
+\r
+        this.items.each(function(item){\r
+            item.parentMenu = this;\r
+        }, this);\r
 \r
-        toolsUl.on(ulListeners);\r
-        \r
         this.toolItems.each(\r
                function(item){\r
                    var li = document.createElement("li");\r
                    li.className = "x-menu-list-item";\r
                    toolsUl.dom.appendChild(li);\r
-                   item.render(li, this);\r
+                   item.render(li);\r
+                item.parentMenu = this;\r
                }, this);\r
-               \r
+\r
         this.toolsUl = toolsUl;\r
-        this.autoWidth();\r
-             \r
-        this.menuBWrap.setStyle('position', 'relative');  \r
-        this.menuBWrap.setHeight(this.height);\r
-        \r
+\r
+        this.menuBWrap.setStyle('position', 'relative');\r
+        this.menuBWrap.setHeight(this.height - 28);\r
+\r
         this.menuPanel.setStyle({\r
                padding: '2px',\r
                position: 'absolute',\r
                overflow: 'auto'\r
         });\r
-        \r
+\r
         this.toolsPanel.setStyle({\r
                padding: '2px 4px 2px 2px',\r
                position: 'absolute',\r
                overflow: 'auto'\r
         });\r
-        \r
+\r
         this.setTitle(this.title);\r
     },\r
-    \r
+\r
     // private\r
     findTargetItem : function(e){\r
         var t = e.getTarget(".x-menu-list-item", this.ul,  true);\r
@@ -227,17 +179,16 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
 \r
         this.fireEvent("beforeshow", this);\r
         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);\r
-        \r
-        var tPanelWidth = 100;      \r
+        var tPanelWidth = 100;\r
         var box = this.menuBWrap.getBox();\r
         this.menuPanel.setWidth(box.width-tPanelWidth);\r
         this.menuPanel.setHeight(box.height);\r
-        \r
+\r
         this.toolsPanel.setWidth(tPanelWidth);\r
         this.toolsPanel.setX(box.x+box.width-tPanelWidth);\r
         this.toolsPanel.setHeight(box.height);\r
     },\r
-    \r
+\r
     addTool : function(){\r
         var a = arguments, l = a.length, item;\r
         for(var i = 0; i < l; i++){\r
@@ -258,7 +209,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
         }\r
         return item;\r
     },\r
-    \r
+\r
     /**\r
      * Adds a separator bar to the Tools\r
      * @return {Ext.menu.Item} The menu item that was added\r
@@ -289,7 +240,7 @@ Ext.extend(Ext.ux.StartMenu, Ext.menu.Menu, {
         }\r
         return this.addToolItem(config);\r
     },\r
-    \r
+\r
     setTitle : function(title, iconCls){\r
         this.title = title;\r
         this.header.child('span').update(title);\r