Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / StartMenu.html
diff --git a/docs/source/StartMenu.html b/docs/source/StartMenu.html
new file mode 100644 (file)
index 0000000..2259b8b
--- /dev/null
@@ -0,0 +1,252 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.ux.StartMenu"></div>/**\r
+ * @class Ext.ux.StartMenu\r
+ * @extends Ext.menu.Menu\r
+ * A start menu object.\r
+ * @constructor\r
+ * Creates a new StartMenu\r
+ * @param {Object} config Configuration options\r
+ *\r
+ * SAMPLE USAGE:\r
+ *\r
+ * this.startMenu = new Ext.ux.StartMenu({\r
+ *             iconCls: 'user',\r
+ *             height: 300,\r
+ *             shadow: true,\r
+ *             title: get_cookie('memberName'),\r
+ *             width: 300\r
+ *     });\r
+ *\r
+ * this.startMenu.add({\r
+ *             text: 'Grid Window',\r
+ *             iconCls:'icon-grid',\r
+ *             handler : this.createWindow,\r
+ *             scope: this\r
+ *     });\r
+ *\r
+ * this.startMenu.addTool({\r
+ *             text:'Logout',\r
+ *             iconCls:'logout',\r
+ *             handler:function(){ window.location = "logout.php"; },\r
+ *             scope:this\r
+ *     });\r
+ */\r
+\r
+Ext.namespace("Ext.ux");\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
+        var tools = this.toolItems;\r
+        this.toolItems = new Ext.util.MixedCollection();\r
+        if(tools){\r
+            this.addTool.apply(this, tools);\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
+               });\r
+               var tl = header.wrap({\r
+                       cls: "ux-start-menu-tl"\r
+               });\r
+               var tr = header.wrap({\r
+                       cls: "ux-start-menu-tr"\r
+               });\r
+               var tc = header.wrap({\r
+                       cls: "ux-start-menu-tc"\r
+               });\r
+\r
+               this.menuBWrap = el.createChild({\r
+                       tag: "div",\r
+                       cls: "x-window-body x-border-layout-ct ux-start-menu-body"\r
+               });\r
+               var ml = this.menuBWrap.wrap({\r
+                       cls: "ux-start-menu-ml"\r
+               });\r
+               var mc = this.menuBWrap.wrap({\r
+                       cls: "x-window-mc ux-start-menu-bwrap"\r
+               });\r
+\r
+               this.menuPanel = this.menuBWrap.createChild({\r
+                       tag: "div",\r
+                       cls: "x-panel x-border-panel ux-start-menu-apps-panel"\r
+               });\r
+               this.toolsPanel = this.menuBWrap.createChild({\r
+                       tag: "div",\r
+                       cls: "x-panel x-border-panel ux-start-menu-tools-panel"\r
+               });\r
+\r
+               var bwrap = ml.wrap({cls: "x-window-bwrap"});\r
+               var bc = bwrap.createChild({\r
+                       tag: "div",\r
+                       cls: "ux-start-menu-bc"\r
+               });\r
+               var bl = bc.wrap({\r
+                       cls: "ux-start-menu-bl x-panel-nofooter"\r
+               });\r
+               var br = bc.wrap({\r
+                       cls: "ux-start-menu-br"\r
+               });\r
+\r
+        this.ul.appendTo(this.menuPanel);\r
+\r
+        var toolsUl = this.toolsPanel.createChild({\r
+               tag: "ul",\r
+               cls: "x-menu-list"\r
+        });\r
+\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
+        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);\r
+                item.parentMenu = this;\r
+               }, this);\r
+\r
+        this.toolsUl = toolsUl;\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
+        this.toolsPanel.setStyle({\r
+               padding: '2px 4px 2px 2px',\r
+               position: 'absolute',\r
+               overflow: 'auto'\r
+        });\r
+\r
+        this.setTitle(this.title);\r
+    },\r
+\r
+    // private\r
+    findTargetItem : function(e){\r
+        var t = e.getTarget(".x-menu-list-item", this.ul,  true);\r
+        if(t && t.menuItemId){\r
+               if(this.items.get(t.menuItemId)){\r
+               return this.items.get(t.menuItemId);\r
+            }else{\r
+               return this.toolItems.get(t.menuItemId);\r
+            }\r
+        }\r
+    },\r
+\r
+    <div id="method-Ext.ux.StartMenu-show"></div>/**\r
+     * Displays this menu relative to another element\r
+     * @param {Mixed} element The element to align to\r
+     * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to\r
+     * the element (defaults to this.defaultAlign)\r
+     * @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)\r
+     */\r
+    show : function(el, pos, parentMenu){\r
+        this.parentMenu = parentMenu;\r
+        if(!this.el){\r
+            this.render();\r
+        }\r
+\r
+        this.fireEvent("beforeshow", this);\r
+        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);\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
+        this.toolsPanel.setWidth(tPanelWidth);\r
+        this.toolsPanel.setX(box.x+box.width-tPanelWidth);\r
+        this.toolsPanel.setHeight(box.height);\r
+    },\r
+\r
+    addTool : function(){\r
+        var a = arguments, l = a.length, item;\r
+        for(var i = 0; i < l; i++){\r
+            var el = a[i];\r
+            if(el.render){ // some kind of Item\r
+                item = this.addToolItem(el);\r
+            }else if(typeof el == "string"){ // string\r
+                if(el == "separator" || el == "-"){\r
+                    item = this.addToolSeparator();\r
+                }else{\r
+                    item = this.addText(el);\r
+                }\r
+            }else if(el.tagName || el.el){ // element\r
+                item = this.addElement(el);\r
+            }else if(typeof el == "object"){ // must be menu item config?\r
+                item = this.addToolMenuItem(el);\r
+            }\r
+        }\r
+        return item;\r
+    },\r
+\r
+    <div id="method-Ext.ux.StartMenu-addToolSeparator"></div>/**\r
+     * Adds a separator bar to the Tools\r
+     * @return {Ext.menu.Item} The menu item that was added\r
+     */\r
+    addToolSeparator : function(){\r
+        return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'}));\r
+    },\r
+\r
+    addToolItem : function(item){\r
+        this.toolItems.add(item);\r
+        if(this.ul){\r
+            var li = document.createElement("li");\r
+            li.className = "x-menu-list-item";\r
+            this.ul.dom.appendChild(li);\r
+            item.render(li, this);\r
+            this.delayAutoWidth();\r
+        }\r
+        return item;\r
+    },\r
+\r
+    addToolMenuItem : function(config){\r
+        if(!(config instanceof Ext.menu.Item)){\r
+            if(typeof config.checked == "boolean"){ // must be check menu item config?\r
+                config = new Ext.menu.CheckItem(config);\r
+            }else{\r
+                config = new Ext.menu.Item(config);\r
+            }\r
+        }\r
+        return this.addToolItem(config);\r
+    },\r
+\r
+    setTitle : function(title, iconCls){\r
+        this.title = title;\r
+        this.header.child('span').update(title);\r
+        return this;\r
+    }\r
+});</pre>    \r
+</body>\r
+</html>
\ No newline at end of file