source/widgets/menu/BaseItem.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.menu.BaseItem\r
  11  * @extends Ext.Component\r
  12  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state\r
  13  * management and base configuration options shared by all menu components.\r
  14  * @constructor\r
  15  * Creates a new BaseItem\r
  16  * @param {Object} config Configuration options\r
  17  */\r
  18 Ext.menu.BaseItem = function(config){\r
  19     Ext.menu.BaseItem.superclass.constructor.call(this, config);\r
  20 \r
  21     this.addEvents(\r
  22         /**\r
  23          * @event click\r
  24          * Fires when this item is clicked\r
  25          * @param {Ext.menu.BaseItem} this\r
  26          * @param {Ext.EventObject} e\r
  27          */\r
  28         'click',\r
  29         /**\r
  30          * @event activate\r
  31          * Fires when this item is activated\r
  32          * @param {Ext.menu.BaseItem} this\r
  33          */\r
  34         'activate',\r
  35         /**\r
  36          * @event deactivate\r
  37          * Fires when this item is deactivated\r
  38          * @param {Ext.menu.BaseItem} this\r
  39          */\r
  40         'deactivate'\r
  41     );\r
  42 \r
  43     if(this.handler){\r
  44         this.on("click", this.handler, this.scope);\r
  45     }\r
  46 };\r
  47 \r
  48 Ext.extend(Ext.menu.BaseItem, Ext.Component, {\r
  49     /**\r
  50      * @cfg {Function} handler\r
  51      * A function that will handle the click event of this menu item (defaults to undefined)\r
  52      */\r
  53     /**\r
  54      * @cfg {Object} scope\r
  55      * The scope in which the handler function will be called.\r
  56      */\r
  57     /**\r
  58      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)\r
  59      */\r
  60     canActivate : false,\r
  61     /**\r
  62      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")\r
  63      */\r
  64     activeClass : "x-menu-item-active",\r
  65     /**\r
  66      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)\r
  67      */\r
  68     hideOnClick : true,\r
  69     /**\r
  70      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)\r
  71      */\r
  72     hideDelay : 100,\r
  73 \r
  74     // private\r
  75     ctype: "Ext.menu.BaseItem",\r
  76 \r
  77     // private\r
  78     actionMode : "container",\r
  79 \r
  80     // private\r
  81     render : function(container, parentMenu){\r
  82         /**\r
  83          * The parent Menu of this Item.\r
  84          * @property parentMenu\r
  85          * @type Ext.menu.Menu\r
  86          */\r
  87         this.parentMenu = parentMenu;\r
  88         Ext.menu.BaseItem.superclass.render.call(this, container);\r
  89         this.container.menuItemId = this.id;\r
  90     },\r
  91 \r
  92     // private\r
  93     onRender : function(container, position){\r
  94         this.el = Ext.get(this.el);\r
  95         if(this.id){\r
  96             this.el.id = this.id;\r
  97         }\r
  98         container.dom.appendChild(this.el.dom);\r
  99     },\r
 100 \r
 101     /**\r
 102      * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}\r
 103      * config property).  If an existing handler is already registered, it will be unregistered for you.\r
 104      * @param {Function} handler The function that should be called on click\r
 105      * @param {Object} scope The scope that should be passed to the handler\r
 106      */\r
 107     setHandler : function(handler, scope){\r
 108         if(this.handler){\r
 109             this.un("click", this.handler, this.scope);\r
 110         }\r
 111         this.on("click", this.handler = handler, this.scope = scope);\r
 112     },\r
 113 \r
 114     // private\r
 115     onClick : function(e){\r
 116         if(!this.disabled && this.fireEvent("click", this, e) !== false\r
 117                 && this.parentMenu.fireEvent("itemclick", this, e) !== false){\r
 118             this.handleClick(e);\r
 119         }else{\r
 120             e.stopEvent();\r
 121         }\r
 122     },\r
 123 \r
 124     // private\r
 125     activate : function(){\r
 126         if(this.disabled){\r
 127             return false;\r
 128         }\r
 129         var li = this.container;\r
 130         li.addClass(this.activeClass);\r
 131         this.region = li.getRegion().adjust(2, 2, -2, -2);\r
 132         this.fireEvent("activate", this);\r
 133         return true;\r
 134     },\r
 135 \r
 136     // private\r
 137     deactivate : function(){\r
 138         this.container.removeClass(this.activeClass);\r
 139         this.fireEvent("deactivate", this);\r
 140     },\r
 141 \r
 142     // private\r
 143     shouldDeactivate : function(e){\r
 144         return !this.region || !this.region.contains(e.getPoint());\r
 145     },\r
 146 \r
 147     // private\r
 148     handleClick : function(e){\r
 149         if(this.hideOnClick){\r
 150             this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);\r
 151         }\r
 152     },\r
 153 \r
 154     // private\r
 155     expandMenu : function(autoActivate){\r
 156         // do nothing\r
 157     },\r
 158 \r
 159     // private\r
 160     hideMenu : function(){\r
 161         // do nothing\r
 162     }\r
 163 });