git.roojs.org Git - roojs1/blob - docs/src/Roo_menu_BaseItem.js.html

   1 <html><head><title>Roo/menu/BaseItem.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13 /**
  14  * @class Roo.menu.BaseItem
  15  * @extends Roo.Component
  16  * @abstract
  17  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
  18  * management and base configuration options shared by all menu components.
  19  * @constructor
  20  * Creates a new BaseItem
  21  * @param {Object} config Configuration options
  22  */
  23 </span><span class="jsdoc-var">Roo.menu.BaseItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  24     </span><span class="jsdoc-var">Roo.menu.BaseItem.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  25
  26     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  27         </span><span class="jsdoc-comment">/**
  28          * @event click
  29          * Fires when this item is clicked
  30          * @param {Roo.menu.BaseItem} this
  31          * @param {Roo.EventObject} e
  32          */
  33         </span><span class="jsdoc-var">click</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  34         </span><span class="jsdoc-comment">/**
  35          * @event activate
  36          * Fires when this item is activated
  37          * @param {Roo.menu.BaseItem} this
  38          */
  39         </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  40         </span><span class="jsdoc-comment">/**
  41          * @event deactivate
  42          * Fires when this item is deactivated
  43          * @param {Roo.menu.BaseItem} this
  44          */
  45         </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  46     </span><span class="jsdoc-syntax">});
  47
  48     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
  49         </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  50     }
  51 };
  52
  53 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.BaseItem</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
  54     </span><span class="jsdoc-comment">/**
  55      * @cfg {Function} handler
  56      * A function that will handle the click event of this menu item (defaults to undefined)
  57      */
  58     /**
  59      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
  60      */
  61     </span><span class="jsdoc-var">canActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  62
  63      </span><span class="jsdoc-comment">/**
  64      * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
  65      */
  66     </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  67
  68     </span><span class="jsdoc-comment">/**
  69      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to &quot;x-menu-item-active&quot;)
  70      */
  71     </span><span class="jsdoc-var">activeClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-menu-item-active&quot;</span><span class="jsdoc-syntax">,
  72     </span><span class="jsdoc-comment">/**
  73      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
  74      */
  75     </span><span class="jsdoc-var">hideOnClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  76     </span><span class="jsdoc-comment">/**
  77      * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
  78      */
  79     </span><span class="jsdoc-var">hideDelay </span><span class="jsdoc-syntax">: 100,
  80
  81     </span><span class="jsdoc-comment">// private
  82     </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.menu.BaseItem&quot;</span><span class="jsdoc-syntax">,
  83
  84     </span><span class="jsdoc-comment">// private
  85     </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;container&quot;</span><span class="jsdoc-syntax">,
  86
  87     </span><span class="jsdoc-comment">// private
  88     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">){
  89         </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
  90         </span><span class="jsdoc-var">Roo.menu.BaseItem.superclass.render.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
  91         </span><span class="jsdoc-var">this.container.menuItemId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
  92     },
  93
  94     </span><span class="jsdoc-comment">// private
  95     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  96         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
  97         </span><span class="jsdoc-var">container.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
  98     },
  99
 100     </span><span class="jsdoc-comment">// private
 101     </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 102         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false
 103                 </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.parentMenu.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;itemclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 104             </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 105         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 106             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 107         }
 108     },
 109
 110     </span><span class="jsdoc-comment">// private
 111     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 112         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
 113             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 114         }
 115         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">;
 116         </span><span class="jsdoc-var">li.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeClass</span><span class="jsdoc-syntax">);
 117         </span><span class="jsdoc-var">this.region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">li.getRegion</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.adjust</span><span class="jsdoc-syntax">(2, 2, -2, -2);
 118         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;activate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 119         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 120     },
 121
 122     </span><span class="jsdoc-comment">// private
 123     </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 124         </span><span class="jsdoc-var">this.container.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeClass</span><span class="jsdoc-syntax">);
 125         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;deactivate&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 126     },
 127
 128     </span><span class="jsdoc-comment">// private
 129     </span><span class="jsdoc-var">shouldDeactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 130         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.region </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.region.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getPoint</span><span class="jsdoc-syntax">());
 131     },
 132
 133     </span><span class="jsdoc-comment">// private
 134     </span><span class="jsdoc-var">handleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 135         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideOnClick</span><span class="jsdoc-syntax">){
 136             </span><span class="jsdoc-var">this.parentMenu.hide.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">]);
 137         }
 138     },
 139
 140     </span><span class="jsdoc-comment">// private
 141     </span><span class="jsdoc-var">expandMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
 142         </span><span class="jsdoc-comment">// do nothing
 143     </span><span class="jsdoc-syntax">},
 144
 145     </span><span class="jsdoc-comment">// private
 146     </span><span class="jsdoc-var">hideMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 147         </span><span class="jsdoc-comment">// do nothing
 148     </span><span class="jsdoc-syntax">}
 149 });</span></code></body></html>