examples/desktop/js/StartMenu.js

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