1 <html><head><title>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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
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.
19 * @param {Object} config Configuration options
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">);
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">, {
29 </span><span class="jsdoc-comment">/**
31 * The text to show on the menu item.
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).
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">/**
41 * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
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 "x-menu-item")
47 </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-menu-item"</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)
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)
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,
59 </span><span class="jsdoc-comment">// private
60 </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Roo.menu.Item"</span><span class="jsdoc-syntax">,
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">"a"</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">"on"</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">"#"</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">;
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">" x-menu-item-arrow" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">) + (</span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">" " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">);
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">);
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">'<img src="{0}" class="x-menu-item-icon {1}" />' </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">);
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.
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">;
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">);
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">'<img src="{0}" class="x-menu-item-icon {2}">' </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">();
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">();
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">);
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">();
120 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
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">&& </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">());
129 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
131 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
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">();
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">&& </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">() && !</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">() && </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);
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">"tl-tr?"</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);
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">&& </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&& </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">);
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">();
176 });</span></code></body></html>