examples/desktop/js/StartMenu.js

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