examples/sandbox/js/StartMenu.js

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