docs/source/BaseItem.html

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