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

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/menu/Item.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  * @class Roo.menu.Item
  13  * @extends Roo.menu.BaseItem
  14  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
  15  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
  16  * activation and click handling.
  17  * @constructor
  18  * Creates a new Item
  19  * @param {Object} config Configuration options
  20  */
  21 </span><span class="jsdoc-var">Roo.menu.Item </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">){
  22     </span><span class="jsdoc-var">Roo.menu.Item.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">);
  23     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
  24         </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.menu.MenuMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">);
  25     }
  26 };
  27 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.menu.BaseItem</span><span class="jsdoc-syntax">, {
  28
  29     </span><span class="jsdoc-comment">/**
  30      * @cfg {String} text
  31      * The text to show on the menu item.
  32      */
  33     </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  34      </span><span class="jsdoc-comment">/**
  35      * @cfg {String} HTML to render in menu
  36      * The text to show on the menu item (HTML version).
  37      */
  38     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  39     </span><span class="jsdoc-comment">/**
  40      * @cfg {String} icon
  41      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
  42      */
  43     </span><span class="jsdoc-var">icon</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
  44     </span><span class="jsdoc-comment">/**
  45      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to &quot;x-menu-item&quot;)
  46      */
  47     </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-menu-item&quot;</span><span class="jsdoc-syntax">,
  48     </span><span class="jsdoc-comment">/**
  49      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
  50      */
  51     </span><span class="jsdoc-var">canActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  52     </span><span class="jsdoc-comment">/**
  53      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
  54      */
  55     </span><span class="jsdoc-var">showDelay</span><span class="jsdoc-syntax">: 200,
  56     </span><span class="jsdoc-comment">// doc'd in BaseItem
  57     </span><span class="jsdoc-var">hideDelay</span><span class="jsdoc-syntax">: 200,
  58
  59     </span><span class="jsdoc-comment">// private
  60     </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.menu.Item&quot;</span><span class="jsdoc-syntax">,
  61
  62     </span><span class="jsdoc-comment">// private
  63     </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">){
  64         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">);
  65         </span><span class="jsdoc-var">el.hideFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
  66         </span><span class="jsdoc-var">el.unselectable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">;
  67         </span><span class="jsdoc-var">el.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">;
  68         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hrefTarget</span><span class="jsdoc-syntax">){
  69             </span><span class="jsdoc-var">el.target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hrefTarget</span><span class="jsdoc-syntax">;
  70         }
  71         </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-string">&quot; x-menu-item-arrow&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">) + (</span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  72
  73         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.html  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">);
  74
  75         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(
  76                 </span><span class="jsdoc-string">'&lt;img src=&quot;{0}&quot; class=&quot;x-menu-item-icon {1}&quot; /&gt;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">,
  77                 </span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.iconCls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
  78         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
  79         </span><span class="jsdoc-var">Roo.menu.Item.superclass.onRender.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">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  80     },
  81
  82     </span><span class="jsdoc-comment">/**
  83      * Sets the text to display in this menu item
  84      * @param {String} text The text to display
  85      * @param {Boolean} isHTML true to indicate text is pure html.
  86      */
  87     </span><span class="jsdoc-var">setText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isHTML</span><span class="jsdoc-syntax">){
  88         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isHTML</span><span class="jsdoc-syntax">) {
  89             </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
  90         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
  91             </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
  92             </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
  93         }
  94         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
  95             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.html  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">);
  96
  97             </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(
  98                 </span><span class="jsdoc-string">'&lt;img src=&quot;{0}&quot; class=&quot;x-menu-item-icon {2}&quot;&gt;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">,
  99                 </span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.iconCls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">));
 100             </span><span class="jsdoc-var">this.parentMenu.autoWidth</span><span class="jsdoc-syntax">();
 101         }
 102     },
 103
 104     </span><span class="jsdoc-comment">// private
 105     </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">){
 106         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// if no link defined, stop the event automatically
 107             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
 108         }
 109         </span><span class="jsdoc-var">Roo.menu.Item.superclass.handleClick.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
 110     },
 111
 112     </span><span class="jsdoc-comment">// private
 113     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
 114         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item.superclass.activate.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">)){
 115             </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
 116             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
 117                 </span><span class="jsdoc-var">this.expandMenu</span><span class="jsdoc-syntax">();
 118             }
 119         }
 120         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 121     },
 122
 123     </span><span class="jsdoc-comment">// private
 124     </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">){
 125         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item.superclass.shouldDeactivate.call</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">)){
 126             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
 127                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.menu.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getRegion</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getPoint</span><span class="jsdoc-syntax">());
 128             }
 129             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 130         }
 131         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 132     },
 133
 134     </span><span class="jsdoc-comment">// private
 135     </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 136         </span><span class="jsdoc-var">Roo.menu.Item.superclass.deactivate.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
 137         </span><span class="jsdoc-var">this.hideMenu</span><span class="jsdoc-syntax">();
 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-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.menu</span><span class="jsdoc-syntax">){
 143             </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">);
 144             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">;
 145             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">() &amp;&amp; !</span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">){
 146                 </span><span class="jsdoc-var">this.showTimer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.deferExpand.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">]);
 147             }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">() &amp;&amp; </span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
 148                 </span><span class="jsdoc-var">this.menu.tryActivate</span><span class="jsdoc-syntax">(0, 1);
 149             }
 150         }
 151     },
 152
 153     </span><span class="jsdoc-comment">// private
 154     </span><span class="jsdoc-var">deferExpand </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">){
 155         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">;
 156         </span><span class="jsdoc-var">this.menu.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu.subMenuAlign </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;tl-tr?&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu</span><span class="jsdoc-syntax">);
 157         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
 158             </span><span class="jsdoc-var">this.menu.tryActivate</span><span class="jsdoc-syntax">(0, 1);
 159         }
 160     },
 161
 162     </span><span class="jsdoc-comment">// private
 163     </span><span class="jsdoc-var">hideMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 164         </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">);
 165         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">;
 166         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hideTimer </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
 167             </span><span class="jsdoc-var">this.hideTimer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.deferHide.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 168         }
 169     },
 170
 171     </span><span class="jsdoc-comment">// private
 172     </span><span class="jsdoc-var">deferHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 173         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">;
 174         </span><span class="jsdoc-var">this.menu.hide</span><span class="jsdoc-syntax">();
 175     }
 176 });</span></code></body></html>