src/widgets/menu/Item.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.menu.Item\r
   9  * @extends Ext.menu.BaseItem\r
  10  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static\r
  11  * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific\r
  12  * activation and click handling.\r
  13  * @constructor\r
  14  * Creates a new Item\r
  15  * @param {Object} config Configuration options\r
  16  * @xtype menuitem\r
  17  */\r
  18 Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {\r
  19     /**\r
  20      * @property menu\r
  21      * @type Ext.menu.Menu\r
  22      * The submenu associated with this Item if one was configured.\r
  23      */\r
  24     /**\r
  25      * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an\r
  26      * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.\r
  27      */\r
  28     /**\r
  29      * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If\r
  30      * icon is specified {@link #iconCls} should not be.\r
  31      */\r
  32     /**\r
  33      * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for\r
  34      * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.\r
  35      */\r
  36     /**\r
  37      * @cfg {String} text The text to display in this item (defaults to '').\r
  38      */\r
  39     /**\r
  40      * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').\r
  41      */\r
  42     /**\r
  43      * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').\r
  44      */\r
  45     /**\r
  46      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')\r
  47      */\r
  48     itemCls : 'x-menu-item',\r
  49     /**\r
  50      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)\r
  51      */\r
  52     canActivate : true,\r
  53     /**\r
  54      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)\r
  55      */\r
  56     showDelay: 200,\r
  57     // doc'd in BaseItem\r
  58     hideDelay: 200,\r
  59 \r
  60     // private\r
  61     ctype: 'Ext.menu.Item',\r
  62 \r
  63     initComponent : function(){\r
  64         Ext.menu.Item.superclass.initComponent.call(this);\r
  65         if(this.menu){\r
  66             this.menu = Ext.menu.MenuMgr.get(this.menu);\r
  67             this.menu.ownerCt = this;\r
  68         }\r
  69     },\r
  70 \r
  71     // private\r
  72     onRender : function(container, position){\r
  73         if (!this.itemTpl) {\r
  74             this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(\r
  75                 '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',\r
  76                     '<tpl if="hrefTarget">',\r
  77                         ' target="{hrefTarget}"',\r
  78                     '</tpl>',\r
  79                  '>',\r
  80                      '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',\r
  81                      '<span class="x-menu-item-text">{text}</span>',\r
  82                  '</a>'\r
  83              );\r
  84         }\r
  85         var a = this.getTemplateArgs();\r
  86         this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);\r
  87         this.iconEl = this.el.child('img.x-menu-item-icon');\r
  88         this.textEl = this.el.child('.x-menu-item-text');\r
  89         if(!this.href) { // if no link defined, prevent the default anchor event\r
  90             this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });\r
  91         }\r
  92         Ext.menu.Item.superclass.onRender.call(this, container, position);\r
  93     },\r
  94 \r
  95     getTemplateArgs: function() {\r
  96         return {\r
  97             id: this.id,\r
  98             cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),\r
  99             href: this.href || '#',\r
 100             hrefTarget: this.hrefTarget,\r
 101             icon: this.icon || Ext.BLANK_IMAGE_URL,\r
 102             iconCls: this.iconCls || '',\r
 103             text: this.itemText||this.text||'&#160;'\r
 104         };\r
 105     },\r
 106 \r
 107     /**\r
 108      * Sets the text to display in this menu item\r
 109      * @param {String} text The text to display\r
 110      */\r
 111     setText : function(text){\r
 112         this.text = text||'&#160;';\r
 113         if(this.rendered){\r
 114             this.textEl.update(this.text);\r
 115             this.parentMenu.layout.doAutoSize();\r
 116         }\r
 117     },\r
 118 \r
 119     /**\r
 120      * Sets the CSS class to apply to the item's icon element\r
 121      * @param {String} cls The CSS class to apply\r
 122      */\r
 123     setIconClass : function(cls){\r
 124         var oldCls = this.iconCls;\r
 125         this.iconCls = cls;\r
 126         if(this.rendered){\r
 127             this.iconEl.replaceClass(oldCls, this.iconCls);\r
 128         }\r
 129     },\r
 130 \r
 131     //private\r
 132     beforeDestroy: function(){\r
 133         if (this.menu){\r
 134             delete this.menu.ownerCt;\r
 135             this.menu.destroy();\r
 136         }\r
 137         Ext.menu.Item.superclass.beforeDestroy.call(this);\r
 138     },\r
 139 \r
 140     // private\r
 141     handleClick : function(e){\r
 142         if(!this.href){ // if no link defined, stop the event automatically\r
 143             e.stopEvent();\r
 144         }\r
 145         Ext.menu.Item.superclass.handleClick.apply(this, arguments);\r
 146     },\r
 147 \r
 148     // private\r
 149     activate : function(autoExpand){\r
 150         if(Ext.menu.Item.superclass.activate.apply(this, arguments)){\r
 151             this.focus();\r
 152             if(autoExpand){\r
 153                 this.expandMenu();\r
 154             }\r
 155         }\r
 156         return true;\r
 157     },\r
 158 \r
 159     // private\r
 160     shouldDeactivate : function(e){\r
 161         if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){\r
 162             if(this.menu && this.menu.isVisible()){\r
 163                 return !this.menu.getEl().getRegion().contains(e.getPoint());\r
 164             }\r
 165             return true;\r
 166         }\r
 167         return false;\r
 168     },\r
 169 \r
 170     // private\r
 171     deactivate : function(){\r
 172         Ext.menu.Item.superclass.deactivate.apply(this, arguments);\r
 173         this.hideMenu();\r
 174     },\r
 175 \r
 176     // private\r
 177     expandMenu : function(autoActivate){\r
 178         if(!this.disabled && this.menu){\r
 179             clearTimeout(this.hideTimer);\r
 180             delete this.hideTimer;\r
 181             if(!this.menu.isVisible() && !this.showTimer){\r
 182                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);\r
 183             }else if (this.menu.isVisible() && autoActivate){\r
 184                 this.menu.tryActivate(0, 1);\r
 185             }\r
 186         }\r
 187     },\r
 188 \r
 189     // private\r
 190     deferExpand : function(autoActivate){\r
 191         delete this.showTimer;\r
 192         this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);\r
 193         if(autoActivate){\r
 194             this.menu.tryActivate(0, 1);\r
 195         }\r
 196     },\r
 197 \r
 198     // private\r
 199     hideMenu : function(){\r
 200         clearTimeout(this.showTimer);\r
 201         delete this.showTimer;\r
 202         if(!this.hideTimer && this.menu && this.menu.isVisible()){\r
 203             this.hideTimer = this.deferHide.defer(this.hideDelay, this);\r
 204         }\r
 205     },\r
 206 \r
 207     // private\r
 208     deferHide : function(){\r
 209         delete this.hideTimer;\r
 210         if(this.menu.over){\r
 211             this.parentMenu.setActiveItem(this, false);\r
 212         }else{\r
 213             this.menu.hide();\r
 214         }\r
 215     }\r
 216 });\r
 217 Ext.reg('menuitem', Ext.menu.Item);