docs/source/StartMenu.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.ux.StartMenu"></div>/**\r
   9  * @class Ext.ux.StartMenu\r
  10  * @extends Ext.menu.Menu\r
  11  * A start menu object.\r
  12  * @constructor\r
  13  * Creates a new StartMenu\r
  14  * @param {Object} config Configuration options\r
  15  *\r
  16  * SAMPLE USAGE:\r
  17  *\r
  18  * this.startMenu = new Ext.ux.StartMenu({\r
  19  *              iconCls: 'user',\r
  20  *              height: 300,\r
  21  *              shadow: true,\r
  22  *              title: get_cookie('memberName'),\r
  23  *              width: 300\r
  24  *      });\r
  25  *\r
  26  * this.startMenu.add({\r
  27  *              text: 'Grid Window',\r
  28  *              iconCls:'icon-grid',\r
  29  *              handler : this.createWindow,\r
  30  *              scope: this\r
  31  *      });\r
  32  *\r
  33  * this.startMenu.addTool({\r
  34  *              text:'Logout',\r
  35  *              iconCls:'logout',\r
  36  *              handler:function(){ window.location = "logout.php"; },\r
  37  *              scope:this\r
  38  *      });\r
  39  */\r
  40 \r
  41 Ext.namespace("Ext.ux");\r
  42 \r
  43 Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {\r
  44     initComponent: function(config) {\r
  45         Ext.ux.StartMenu.superclass.initComponent.call(this, config);\r
  46 \r
  47         var tools = this.toolItems;\r
  48         this.toolItems = new Ext.util.MixedCollection();\r
  49         if(tools){\r
  50             this.addTool.apply(this, tools);\r
  51         }\r
  52     },\r
  53 \r
  54     // private\r
  55     onRender : function(ct, position){\r
  56         Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);\r
  57         var el = this.el.addClass('ux-start-menu');\r
  58 \r
  59         var header = el.createChild({\r
  60                 tag: "div",\r
  61                 cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls\r
  62         });\r
  63 \r
  64                 this.header = header;\r
  65 \r
  66                 var headerText = header.createChild({\r
  67                         tag: "span",\r
  68                         cls: "x-window-header-text"\r
  69                 });\r
  70                 var tl = header.wrap({\r
  71                         cls: "ux-start-menu-tl"\r
  72                 });\r
  73                 var tr = header.wrap({\r
  74                         cls: "ux-start-menu-tr"\r
  75                 });\r
  76                 var tc = header.wrap({\r
  77                         cls: "ux-start-menu-tc"\r
  78                 });\r
  79 \r
  80                 this.menuBWrap = el.createChild({\r
  81                         tag: "div",\r
  82                         cls: "x-window-body x-border-layout-ct ux-start-menu-body"\r
  83                 });\r
  84                 var ml = this.menuBWrap.wrap({\r
  85                         cls: "ux-start-menu-ml"\r
  86                 });\r
  87                 var mc = this.menuBWrap.wrap({\r
  88                         cls: "x-window-mc ux-start-menu-bwrap"\r
  89                 });\r
  90 \r
  91                 this.menuPanel = this.menuBWrap.createChild({\r
  92                         tag: "div",\r
  93                         cls: "x-panel x-border-panel ux-start-menu-apps-panel"\r
  94                 });\r
  95                 this.toolsPanel = this.menuBWrap.createChild({\r
  96                         tag: "div",\r
  97                         cls: "x-panel x-border-panel ux-start-menu-tools-panel"\r
  98                 });\r
  99 \r
 100                 var bwrap = ml.wrap({cls: "x-window-bwrap"});\r
 101                 var bc = bwrap.createChild({\r
 102                         tag: "div",\r
 103                         cls: "ux-start-menu-bc"\r
 104                 });\r
 105                 var bl = bc.wrap({\r
 106                         cls: "ux-start-menu-bl x-panel-nofooter"\r
 107                 });\r
 108                 var br = bc.wrap({\r
 109                         cls: "ux-start-menu-br"\r
 110                 });\r
 111 \r
 112         this.ul.appendTo(this.menuPanel);\r
 113 \r
 114         var toolsUl = this.toolsPanel.createChild({\r
 115                 tag: "ul",\r
 116                 cls: "x-menu-list"\r
 117         });\r
 118 \r
 119         this.mon(toolsUl, 'click', this.onClick, this);\r
 120         this.mon(toolsUl, 'mouseover', this.onMouseOver, this);\r
 121         this.mon(toolsUl, 'mouseout', this.onMouseOut, this);\r
 122 \r
 123         this.items.each(function(item){\r
 124             item.parentMenu = this;\r
 125         }, this);\r
 126 \r
 127         this.toolItems.each(\r
 128                 function(item){\r
 129                     var li = document.createElement("li");\r
 130                     li.className = "x-menu-list-item";\r
 131                     toolsUl.dom.appendChild(li);\r
 132                     item.render(li);\r
 133                 item.parentMenu = this;\r
 134                 }, this);\r
 135 \r
 136         this.toolsUl = toolsUl;\r
 137 \r
 138         this.menuBWrap.setStyle('position', 'relative');\r
 139         this.menuBWrap.setHeight(this.height - 28);\r
 140 \r
 141         this.menuPanel.setStyle({\r
 142                 padding: '2px',\r
 143                 position: 'absolute',\r
 144                 overflow: 'auto'\r
 145         });\r
 146 \r
 147         this.toolsPanel.setStyle({\r
 148                 padding: '2px 4px 2px 2px',\r
 149                 position: 'absolute',\r
 150                 overflow: 'auto'\r
 151         });\r
 152 \r
 153         this.setTitle(this.title);\r
 154     },\r
 155 \r
 156     // private\r
 157     findTargetItem : function(e){\r
 158         var t = e.getTarget(".x-menu-list-item", this.ul,  true);\r
 159         if(t && t.menuItemId){\r
 160                 if(this.items.get(t.menuItemId)){\r
 161                 return this.items.get(t.menuItemId);\r
 162             }else{\r
 163                 return this.toolItems.get(t.menuItemId);\r
 164             }\r
 165         }\r
 166     },\r
 167 \r
 168     <div id="method-Ext.ux.StartMenu-show"></div>/**\r
 169      * Displays this menu relative to another element\r
 170      * @param {Mixed} element The element to align to\r
 171      * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to\r
 172      * the element (defaults to this.defaultAlign)\r
 173      * @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)\r
 174      */\r
 175     show : function(el, pos, parentMenu){\r
 176         this.parentMenu = parentMenu;\r
 177         if(!this.el){\r
 178             this.render();\r
 179         }\r
 180 \r
 181         this.fireEvent("beforeshow", this);\r
 182         this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);\r
 183         var tPanelWidth = 100;\r
 184         var box = this.menuBWrap.getBox();\r
 185         this.menuPanel.setWidth(box.width-tPanelWidth);\r
 186         this.menuPanel.setHeight(box.height);\r
 187 \r
 188         this.toolsPanel.setWidth(tPanelWidth);\r
 189         this.toolsPanel.setX(box.x+box.width-tPanelWidth);\r
 190         this.toolsPanel.setHeight(box.height);\r
 191     },\r
 192 \r
 193     addTool : function(){\r
 194         var a = arguments, l = a.length, item;\r
 195         for(var i = 0; i < l; i++){\r
 196             var el = a[i];\r
 197             if(el.render){ // some kind of Item\r
 198                 item = this.addToolItem(el);\r
 199             }else if(typeof el == "string"){ // string\r
 200                 if(el == "separator" || el == "-"){\r
 201                     item = this.addToolSeparator();\r
 202                 }else{\r
 203                     item = this.addText(el);\r
 204                 }\r
 205             }else if(el.tagName || el.el){ // element\r
 206                 item = this.addElement(el);\r
 207             }else if(typeof el == "object"){ // must be menu item config?\r
 208                 item = this.addToolMenuItem(el);\r
 209             }\r
 210         }\r
 211         return item;\r
 212     },\r
 213 \r
 214     <div id="method-Ext.ux.StartMenu-addToolSeparator"></div>/**\r
 215      * Adds a separator bar to the Tools\r
 216      * @return {Ext.menu.Item} The menu item that was added\r
 217      */\r
 218     addToolSeparator : function(){\r
 219         return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'}));\r
 220     },\r
 221 \r
 222     addToolItem : function(item){\r
 223         this.toolItems.add(item);\r
 224         if(this.ul){\r
 225             var li = document.createElement("li");\r
 226             li.className = "x-menu-list-item";\r
 227             this.ul.dom.appendChild(li);\r
 228             item.render(li, this);\r
 229             this.delayAutoWidth();\r
 230         }\r
 231         return item;\r
 232     },\r
 233 \r
 234     addToolMenuItem : function(config){\r
 235         if(!(config instanceof Ext.menu.Item)){\r
 236             if(typeof config.checked == "boolean"){ // must be check menu item config?\r
 237                 config = new Ext.menu.CheckItem(config);\r
 238             }else{\r
 239                 config = new Ext.menu.Item(config);\r
 240             }\r
 241         }\r
 242         return this.addToolItem(config);\r
 243     },\r
 244 \r
 245     setTitle : function(title, iconCls){\r
 246         this.title = title;\r
 247         this.header.child('span').update(title);\r
 248         return this;\r
 249     }\r
 250 });</pre>    \r
 251 </body>\r
 252 </html>