docs/source/BaseItem.html

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