1 <html><head><title>Roo/menu/Menu.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">
13 * @class Roo.menu.Menu
14 * @extends Roo.util.Observable
15 * A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class
16 * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
19 * @param {Object} config Configuration options
21 </span><span class="jsdoc-var">Roo.menu.Menu </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">){
23 </span><span class="jsdoc-var">Roo.menu.Menu.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 </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
26 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
27 </span><span class="jsdoc-comment">/**
29 * Fires before this menu is displayed
30 * @param {Roo.menu.Menu} this
32 </span><span class="jsdoc-var">beforeshow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
33 </span><span class="jsdoc-comment">/**
35 * Fires before this menu is hidden
36 * @param {Roo.menu.Menu} this
38 </span><span class="jsdoc-var">beforehide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
39 </span><span class="jsdoc-comment">/**
41 * Fires after this menu is displayed
42 * @param {Roo.menu.Menu} this
44 </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
45 </span><span class="jsdoc-comment">/**
47 * Fires after this menu is hidden
48 * @param {Roo.menu.Menu} this
50 </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
51 </span><span class="jsdoc-comment">/**
53 * Fires when this menu is clicked (or when the enter key is pressed while it is active)
54 * @param {Roo.menu.Menu} this
55 * @param {Roo.menu.Item} menuItem The menu item that was clicked
56 * @param {Roo.EventObject} e
58 </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
59 </span><span class="jsdoc-comment">/**
61 * Fires when the mouse is hovering over this menu
62 * @param {Roo.menu.Menu} this
63 * @param {Roo.EventObject} e
64 * @param {Roo.menu.Item} menuItem The menu item that was clicked
66 </span><span class="jsdoc-var">mouseover </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-comment">/**
69 * Fires when the mouse exits this menu
70 * @param {Roo.menu.Menu} this
71 * @param {Roo.EventObject} e
72 * @param {Roo.menu.Item} menuItem The menu item that was clicked
74 </span><span class="jsdoc-var">mouseout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
75 </span><span class="jsdoc-comment">/**
77 * Fires when a menu item contained in this menu is clicked
78 * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
79 * @param {Roo.EventObject} e
81 </span><span class="jsdoc-var">itemclick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
82 </span><span class="jsdoc-syntax">});
83 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.registerMenu</span><span class="jsdoc-syntax">) {
84 </span><span class="jsdoc-var">Roo.menu.MenuMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
87 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mis </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
88 </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">();
89 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mis</span><span class="jsdoc-syntax">){
90 </span><span class="jsdoc-var">this.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mis</span><span class="jsdoc-syntax">);
94 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Menu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
95 </span><span class="jsdoc-comment">/**
96 * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
98 </span><span class="jsdoc-var">minWidth </span><span class="jsdoc-syntax">: 120,
99 </span><span class="jsdoc-comment">/**
100 * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
101 * for bottom-right shadow (defaults to "sides")
103 </span><span class="jsdoc-var">shadow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"sides"</span><span class="jsdoc-syntax">,
104 </span><span class="jsdoc-comment">/**
105 * @cfg {String} subMenuAlign The {@link Roo.Element#alignTo} anchor position value to use for submenus of
106 * this menu (defaults to "tl-tr?")
108 </span><span class="jsdoc-var">subMenuAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"tl-tr?"</span><span class="jsdoc-syntax">,
109 </span><span class="jsdoc-comment">/**
110 * @cfg {String} defaultAlign The default {@link Roo.Element#alignTo) anchor position value for this menu
111 * relative to its element of origin (defaults to "tl-bl?")
113 </span><span class="jsdoc-var">defaultAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"tl-bl?"</span><span class="jsdoc-syntax">,
114 </span><span class="jsdoc-comment">/**
115 * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
117 </span><span class="jsdoc-var">allowOtherMenus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
118 </span><span class="jsdoc-comment">/**
119 * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
121 </span><span class="jsdoc-var">registerMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
123 </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
125 </span><span class="jsdoc-comment">// private
126 </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
127 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
128 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
130 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Layer</span><span class="jsdoc-syntax">({
131 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-menu"</span><span class="jsdoc-syntax">,
132 </span><span class="jsdoc-var">shadow</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">,
133 </span><span class="jsdoc-var">constrain</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
134 </span><span class="jsdoc-var">parentEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.parentEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">,
135 </span><span class="jsdoc-var">zindex</span><span class="jsdoc-syntax">:15000
138 </span><span class="jsdoc-var">this.keyNav </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.MenuNav</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
140 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.plain</span><span class="jsdoc-syntax">){
141 </span><span class="jsdoc-var">el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"x-menu-plain"</span><span class="jsdoc-syntax">);
143 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
144 </span><span class="jsdoc-var">el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
146 </span><span class="jsdoc-comment">// generic focus element
147 </span><span class="jsdoc-var">this.focusEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">({
148 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"a"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-menu-focus"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"#"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">onclick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"return false;"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"-1"
149 </span><span class="jsdoc-syntax">});
150 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ul </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"ul"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-menu-list"</span><span class="jsdoc-syntax">});
151 </span><span class="jsdoc-comment">//disabling touch- as it's causing issues ..
152 //ul.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
153 </span><span class="jsdoc-var">ul.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click' </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
156 </span><span class="jsdoc-var">ul.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOver</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
157 </span><span class="jsdoc-var">ul.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseout"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onMouseOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
158 </span><span class="jsdoc-var">this.items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
159 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.hidden</span><span class="jsdoc-syntax">) {
160 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
163 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"li"</span><span class="jsdoc-syntax">);
164 </span><span class="jsdoc-var">li.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"x-menu-list-item"</span><span class="jsdoc-syntax">;
165 </span><span class="jsdoc-var">ul.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
166 </span><span class="jsdoc-var">item.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
167 }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
168 </span><span class="jsdoc-var">this.ul </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ul</span><span class="jsdoc-syntax">;
169 </span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">();
172 </span><span class="jsdoc-comment">// private
173 </span><span class="jsdoc-var">autoWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
174 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ul </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.ul</span><span class="jsdoc-syntax">;
175 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
176 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
178 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">;
179 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">){
180 </span><span class="jsdoc-var">el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
181 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
182 </span><span class="jsdoc-var">el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minWidth</span><span class="jsdoc-syntax">);
183 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.offsetWidth</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// force recalc
184 </span><span class="jsdoc-var">el.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ul.getWidth</span><span class="jsdoc-syntax">()+</span><span class="jsdoc-var">el.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"lr"</span><span class="jsdoc-syntax">));
188 </span><span class="jsdoc-comment">// private
189 </span><span class="jsdoc-var">delayAutoWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
190 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
191 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.awTask</span><span class="jsdoc-syntax">){
192 </span><span class="jsdoc-var">this.awTask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.DelayedTask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
194 </span><span class="jsdoc-var">this.awTask.delay</span><span class="jsdoc-syntax">(20);
198 </span><span class="jsdoc-comment">// private
199 </span><span class="jsdoc-var">findTargetItem </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">){
200 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">".x-menu-list-item"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.ul</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
201 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">t.menuItemId</span><span class="jsdoc-syntax">){
202 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.items.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.menuItemId</span><span class="jsdoc-syntax">);
206 </span><span class="jsdoc-comment">// private
207 </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">){
208 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"menu.onClick"</span><span class="jsdoc-syntax">);
209 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findTargetItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
210 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
211 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
213 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
214 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">e.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">t.menu </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">t.disabled</span><span class="jsdoc-syntax">) {
215 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">t.shouldDeactivate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)){
216 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
217 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">;
218 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
220 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.canActivate</span><span class="jsdoc-syntax">){
221 </span><span class="jsdoc-var">this.setActiveItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
223 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
228 </span><span class="jsdoc-var">t.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
229 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
232 </span><span class="jsdoc-comment">// private
233 </span><span class="jsdoc-var">setActiveItem </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
234 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">){
235 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">){
236 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
238 </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
239 </span><span class="jsdoc-var">item.activate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">);
240 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
241 </span><span class="jsdoc-var">item.expandMenu</span><span class="jsdoc-syntax">();
245 </span><span class="jsdoc-comment">// private
246 </span><span class="jsdoc-var">tryActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">step</span><span class="jsdoc-syntax">){
247 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
248 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">start</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">>= 0 && </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">step</span><span class="jsdoc-syntax">){
249 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">items.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
250 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">item.disabled </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">item.canActivate</span><span class="jsdoc-syntax">){
251 </span><span class="jsdoc-var">this.setActiveItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
252 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
255 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
258 </span><span class="jsdoc-comment">// private
259 </span><span class="jsdoc-var">onMouseOver </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">){
260 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
261 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findTargetItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)){
262 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.canActivate </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">t.disabled</span><span class="jsdoc-syntax">){
263 </span><span class="jsdoc-var">this.setActiveItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
266 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</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-var">t</span><span class="jsdoc-syntax">);
269 </span><span class="jsdoc-comment">// private
270 </span><span class="jsdoc-var">onMouseOut </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">){
271 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
272 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.findTargetItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)){
273 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">t.shouldDeactivate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)){
274 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
275 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">;
278 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseout"</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-var">t</span><span class="jsdoc-syntax">);
281 </span><span class="jsdoc-comment">/**
282 * Read-only. Returns true if the menu is currently displayed, else false.
285 </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
286 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">&& !</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">;
289 </span><span class="jsdoc-comment">/**
290 * Displays this menu relative to another element
291 * @param {String/HTMLElement/Roo.Element} element The element to align to
292 * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
293 * the element (defaults to this.defaultAlign)
294 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
296 </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">){
297 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
298 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
299 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
301 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"beforeshow"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
302 </span><span class="jsdoc-var">this.showAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getAlignToXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.defaultAlign</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
305 </span><span class="jsdoc-comment">/**
306 * Displays this menu at a specific xy position
307 * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
308 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
310 </span><span class="jsdoc-var">showAt </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">/* private: */</span><span class="jsdoc-var">_e</span><span class="jsdoc-syntax">){
311 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
312 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
313 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
315 </span><span class="jsdoc-keyword">if</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">){
316 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"beforeshow"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
317 </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.adjustForConstraints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
319 </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
320 </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
321 </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
322 </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
323 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"show"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
326 </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
327 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
328 </span><span class="jsdoc-var">this.doFocus.defer</span><span class="jsdoc-syntax">(50, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
332 </span><span class="jsdoc-var">doFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
333 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
334 </span><span class="jsdoc-var">this.focusEl.focus</span><span class="jsdoc-syntax">();
338 </span><span class="jsdoc-comment">/**
339 * Hides this menu and optionally all parent menus
340 * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
342 </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">deep</span><span class="jsdoc-syntax">){
343 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()){
344 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"beforehide"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
345 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">){
346 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
347 </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
349 </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
350 </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
351 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hide"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
353 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">deep </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.parentMenu</span><span class="jsdoc-syntax">){
354 </span><span class="jsdoc-var">this.parentMenu.hide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
358 </span><span class="jsdoc-comment">/**
359 * Addds one or more items of any type supported by the Menu class, or that can be converted into menu items.
360 * Any of the following are valid:
362 * <li>Any menu item object based on {@link Roo.menu.Item}</li>
363 * <li>An HTMLElement object which will be converted to a menu item</li>
364 * <li>A menu item config object that will be created as a new menu item</li>
365 * <li>A string, which can either be '-' or 'separator' to add a menu separator, otherwise
366 * it will be converted into a {@link Roo.menu.TextItem} and added</li>
369 * <pre><code>
371 var menu = new Roo.menu.Menu();
373 // Create a menu item to add by reference
374 var menuItem = new Roo.menu.Item({ text: 'New Item!' });
376 // Add a bunch of items at once using different methods.
377 // Only the last item added will be returned.
379 menuItem, // add existing item by ref
380 'Dynamic Item', // new TextItem
381 '-', // new separator
382 { text: 'Config Item' } // new item by config
384 </code></pre>
385 * @param {Mixed} args One or more menu items, menu item configs or other objects that can be converted to menu items
386 * @return {Roo.menu.Item} The menu item that was added, or the last one if multiple items were added
388 </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
389 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
390 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
391 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
392 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">"object"</span><span class="jsdoc-syntax">) && </span><span class="jsdoc-var">el.xtype </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">el.xns</span><span class="jsdoc-syntax">) {
393 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.menu</span><span class="jsdoc-syntax">);
396 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.render</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// some kind of Item
397 </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
398 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"string"</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// string
399 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"separator" </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"-"</span><span class="jsdoc-syntax">){
400 </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addSeparator</span><span class="jsdoc-syntax">();
401 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
402 </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
404 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el.el</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// element
405 </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
406 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"object"</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// must be menu item config?
407 </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addMenuItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
410 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
413 </span><span class="jsdoc-comment">/**
414 * Returns this menu's underlying {@link Roo.Element} object
415 * @return {Roo.Element} The element
417 </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
418 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
419 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
421 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
424 </span><span class="jsdoc-comment">/**
425 * Adds a separator bar to the menu
426 * @return {Roo.menu.Item} The menu item that was added
428 </span><span class="jsdoc-var">addSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
429 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.Separator</span><span class="jsdoc-syntax">());
432 </span><span class="jsdoc-comment">/**
433 * Adds an {@link Roo.Element} object to the menu
434 * @param {String/HTMLElement/Roo.Element} el The element or DOM node to add, or its id
435 * @return {Roo.menu.Item} The menu item that was added
437 </span><span class="jsdoc-var">addElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
438 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.BaseItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">));
441 </span><span class="jsdoc-comment">/**
442 * Adds an existing object based on {@link Roo.menu.Item} to the menu
443 * @param {Roo.menu.Item} item The menu item to add
444 * @return {Roo.menu.Item} The menu item that was added
446 </span><span class="jsdoc-var">addItem </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
447 </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
448 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.ul</span><span class="jsdoc-syntax">){
449 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"li"</span><span class="jsdoc-syntax">);
450 </span><span class="jsdoc-var">li.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"x-menu-list-item"</span><span class="jsdoc-syntax">;
451 </span><span class="jsdoc-var">this.ul.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
452 </span><span class="jsdoc-var">item.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
453 </span><span class="jsdoc-var">this.delayAutoWidth</span><span class="jsdoc-syntax">();
455 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
458 </span><span class="jsdoc-comment">/**
459 * Creates a new {@link Roo.menu.Item} based an the supplied config object and adds it to the menu
460 * @param {Object} config A MenuItem config object
461 * @return {Roo.menu.Item} The menu item that was added
463 </span><span class="jsdoc-var">addMenuItem </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">){
464 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">config </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Roo.menu.Item</span><span class="jsdoc-syntax">)){
465 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">config.checked </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">"boolean"</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// must be check menu item config?
466 </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.CheckItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
467 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
468 </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.Item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
471 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
474 </span><span class="jsdoc-comment">/**
475 * Creates a new {@link Roo.menu.TextItem} with the supplied text and adds it to the menu
476 * @param {String} text The text to display in the menu item
477 * @return {Roo.menu.Item} The menu item that was added
479 </span><span class="jsdoc-var">addText </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">){
480 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.menu.TextItem</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">}));
483 </span><span class="jsdoc-comment">/**
484 * Inserts an existing object based on {@link Roo.menu.Item} to the menu at a specified index
485 * @param {Number} index The index in the menu's list of current items where the new item should be inserted
486 * @param {Roo.menu.Item} item The menu item to add
487 * @return {Roo.menu.Item} The menu item that was added
489 </span><span class="jsdoc-var">insert </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
490 </span><span class="jsdoc-var">this.items.insert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
491 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.ul</span><span class="jsdoc-syntax">){
492 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"li"</span><span class="jsdoc-syntax">);
493 </span><span class="jsdoc-var">li.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"x-menu-list-item"</span><span class="jsdoc-syntax">;
494 </span><span class="jsdoc-var">this.ul.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.ul.dom.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">]);
495 </span><span class="jsdoc-var">item.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
496 </span><span class="jsdoc-var">this.delayAutoWidth</span><span class="jsdoc-syntax">();
498 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
501 </span><span class="jsdoc-comment">/**
502 * Removes an {@link Roo.menu.Item} from the menu and destroys the object
503 * @param {Roo.menu.Item} item The menu item to remove
505 </span><span class="jsdoc-var">remove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
506 </span><span class="jsdoc-var">this.items.removeKey</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.id</span><span class="jsdoc-syntax">);
507 </span><span class="jsdoc-var">item.destroy</span><span class="jsdoc-syntax">();
510 </span><span class="jsdoc-comment">/**
511 * Removes and destroys all items in the menu
513 </span><span class="jsdoc-var">removeAll </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
514 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">;
515 </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items.first</span><span class="jsdoc-syntax">()){
516 </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">);
521 </span><span class="jsdoc-comment">// MenuNav is a private utility class used internally by the Menu
522 </span><span class="jsdoc-var">Roo.menu.MenuNav </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">menu</span><span class="jsdoc-syntax">){
523 </span><span class="jsdoc-var">Roo.menu.MenuNav.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">menu.el</span><span class="jsdoc-syntax">);
524 </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">menu</span><span class="jsdoc-syntax">;
527 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.MenuNav</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.KeyNav</span><span class="jsdoc-syntax">, {
528 </span><span class="jsdoc-var">doRelay </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">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
529 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
530 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.menu.activeItem </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">e.isNavKeyPress</span><span class="jsdoc-syntax">() && </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">e.SPACE </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">e.RETURN</span><span class="jsdoc-syntax">){
531 </span><span class="jsdoc-var">this.menu.tryActivate</span><span class="jsdoc-syntax">(0, 1);
532 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
534 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">h.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </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-var">this.menu</span><span class="jsdoc-syntax">);
537 </span><span class="jsdoc-var">up </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">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
538 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">m.tryActivate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.items.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.activeItem</span><span class="jsdoc-syntax">)-1, -1)){
539 </span><span class="jsdoc-var">m.tryActivate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.items.length</span><span class="jsdoc-syntax">-1, -1);
543 </span><span class="jsdoc-var">down </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">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
544 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">m.tryActivate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.items.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.activeItem</span><span class="jsdoc-syntax">)+1, 1)){
545 </span><span class="jsdoc-var">m.tryActivate</span><span class="jsdoc-syntax">(0, 1);
549 </span><span class="jsdoc-var">right </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">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
550 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.activeItem</span><span class="jsdoc-syntax">){
551 </span><span class="jsdoc-var">m.activeItem.expandMenu</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
555 </span><span class="jsdoc-var">left </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">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
556 </span><span class="jsdoc-var">m.hide</span><span class="jsdoc-syntax">();
557 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.parentMenu </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">m.parentMenu.activeItem</span><span class="jsdoc-syntax">){
558 </span><span class="jsdoc-var">m.parentMenu.activeItem.activate</span><span class="jsdoc-syntax">();
562 </span><span class="jsdoc-var">enter </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">, </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">){
563 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m.activeItem</span><span class="jsdoc-syntax">){
564 </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
565 </span><span class="jsdoc-var">m.activeItem.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
566 </span><span class="jsdoc-var">m.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">m.activeItem</span><span class="jsdoc-syntax">);
567 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
570 });</span></code></body></html>