1 <html><head><title>Roo/bootstrap/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">/*
9 * @class Roo.bootstrap.Menu
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Menu class - container for MenuItems
12 * @cfg {String} type (dropdown|treeview|submenu) type of menu
13 * @cfg {bool} hidden if the menu should be hidden when rendered.
14 * @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true)
15 * @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false)
19 * @param {Object} config The config object
23 </span><span class="jsdoc-var">Roo.bootstrap.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">){
24 </span><span class="jsdoc-var">Roo.bootstrap.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-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.registerMenu </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'treeview'</span><span class="jsdoc-syntax">) {
26 </span><span class="jsdoc-var">Roo.bootstrap.MenuMgr.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
30 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
31 </span><span class="jsdoc-comment">/**
33 * Fires before this menu is displayed (return false to block)
34 * @param {Roo.menu.Menu} this
36 </span><span class="jsdoc-var">beforeshow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
37 </span><span class="jsdoc-comment">/**
39 * Fires before this menu is hidden (return false to block)
40 * @param {Roo.menu.Menu} this
42 </span><span class="jsdoc-var">beforehide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
43 </span><span class="jsdoc-comment">/**
45 * Fires after this menu is displayed
46 * @param {Roo.menu.Menu} this
48 </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
49 </span><span class="jsdoc-comment">/**
51 * Fires after this menu is hidden
52 * @param {Roo.menu.Menu} this
54 </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
55 </span><span class="jsdoc-comment">/**
57 * Fires when this menu is clicked (or when the enter key is pressed while it is active)
58 * @param {Roo.menu.Menu} this
59 * @param {Roo.menu.Item} menuItem The menu item that was clicked
60 * @param {Roo.EventObject} e
62 </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
63 </span><span class="jsdoc-comment">/**
65 * Fires when the mouse is hovering over this menu
66 * @param {Roo.menu.Menu} this
67 * @param {Roo.EventObject} e
68 * @param {Roo.menu.Item} menuItem The menu item that was clicked
70 </span><span class="jsdoc-var">mouseover </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
71 </span><span class="jsdoc-comment">/**
73 * Fires when the mouse exits this menu
74 * @param {Roo.menu.Menu} this
75 * @param {Roo.EventObject} e
76 * @param {Roo.menu.Item} menuItem The menu item that was clicked
78 </span><span class="jsdoc-var">mouseout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
79 </span><span class="jsdoc-comment">/**
81 * Fires when a menu item contained in this menu is clicked
82 * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
83 * @param {Roo.EventObject} e
85 </span><span class="jsdoc-var">itemclick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
86 </span><span class="jsdoc-syntax">});
87 </span><span class="jsdoc-var">this.menuitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o.el.id</span><span class="jsdoc-syntax">; });
90 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Menu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, {
92 </span><span class="jsdoc-comment">/// html : false,
94 </span><span class="jsdoc-var">triggerEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// is this set by component builder? -- it should really be fetched from parent()???
95 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
96 </span><span class="jsdoc-comment">/**
97 * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
99 </span><span class="jsdoc-var">registerMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
101 </span><span class="jsdoc-var">menuItems </span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// stores the menu items..
103 </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
105 </span><span class="jsdoc-var">parentMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
107 </span><span class="jsdoc-var">stopEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
109 </span><span class="jsdoc-var">isLink </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
111 </span><span class="jsdoc-var">container_method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'getDocumentBody'</span><span class="jsdoc-syntax">,
114 </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
115 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
118 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
120 </span><span class="jsdoc-comment">//if (['right'].indexOf(this.align)!==-1) {
121 // cfg.cn[1].cls += ' pull-right'
125 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
126 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
127 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dropdown-menu' </span><span class="jsdoc-syntax">,
128 </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'z-index:1000'
130 </span><span class="jsdoc-syntax">};
132 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'submenu'</span><span class="jsdoc-syntax">) {
133 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'submenu active'</span><span class="jsdoc-syntax">;
135 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.type </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-string">'treeview'</span><span class="jsdoc-syntax">) {
136 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'treeview-menu'</span><span class="jsdoc-syntax">;
139 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
141 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
143 </span><span class="jsdoc-comment">// Roo.log("ADD event");
144 // Roo.log(this.triggerEl.dom);
146 </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
148 </span><span class="jsdoc-var">this.triggerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mouseup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTriggerPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
151 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'nav-item'</span><span class="jsdoc-syntax">) && </span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
152 </span><span class="jsdoc-comment">// dropdown toggle on the 'a' in BS4?
153 </span><span class="jsdoc-var">this.triggerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-link'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
154 } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.triggerEl.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'no-dropdown-toggle'</span><span class="jsdoc-syntax">)) {
155 </span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dropdown-toggle'</span><span class="jsdoc-syntax">);
157 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
158 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouch</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
160 </span><span class="jsdoc-var">this.el.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">);
162 </span><span class="jsdoc-var">this.el.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">);
163 </span><span class="jsdoc-var">this.el.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">);
167 </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">)
169 </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">".dropdown-menu-item"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
170 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
171 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
173 </span><span class="jsdoc-comment">//Roo.log(t); Roo.log(t.id);
174 </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.id</span><span class="jsdoc-syntax">){
175 </span><span class="jsdoc-comment">//Roo.log(this.menuitems);
176 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.menuitems.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.id</span><span class="jsdoc-syntax">);
178 </span><span class="jsdoc-comment">//return this.items.get(t.menuItemId);
179 </span><span class="jsdoc-syntax">}
181 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
184 </span><span class="jsdoc-var">onTouch </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">)
186 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"menu.onTouch"</span><span class="jsdoc-syntax">);
187 </span><span class="jsdoc-comment">//e.stopEvent(); this make the user popdown broken
188 </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
191 </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">)
193 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"menu.onClick"</span><span class="jsdoc-syntax">);
195 </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">);
196 </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.isContainer</span><span class="jsdoc-syntax">){
197 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
199 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
200 </span><span class="jsdoc-comment">/*
201 if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
202 if(t == this.activeItem && t.shouldDeactivate(e)){
203 this.activeItem.deactivate();
204 delete this.activeItem;
208 this.setActiveItem(t, true);
216 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pass click event'</span><span class="jsdoc-syntax">);
218 </span><span class="jsdoc-var">t.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
220 </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">);
222 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
224 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t.href.length </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">t.href </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">){
225 (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">_this.hide</span><span class="jsdoc-syntax">(); })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100);
230 </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">){
231 </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">);
232 </span><span class="jsdoc-comment">//Roo.log(t);
234 // if(t.canActivate && !t.disabled){
235 // this.setActiveItem(t, true);
239 </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">);
241 </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
242 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">;
244 </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">){
245 </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">);
247 </span><span class="jsdoc-comment">//if(t ){
248 // if(t == this.activeItem && t.shouldDeactivate(e)){
249 // this.activeItem.deactivate();
250 // delete this.activeItem;
253 </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">);
257 </span><span class="jsdoc-comment">/**
258 * Displays this menu relative to another element
259 * @param {String/HTMLElement/Roo.Element} element The element to align to
260 * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
261 * the element (defaults to this.defaultAlign)
262 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
264 </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">)
266 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">=== </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">)) {
267 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"show canceled"</span><span class="jsdoc-syntax">);
268 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
270 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
271 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
272 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
275 </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">);
277 </span><span class="jsdoc-comment">/**
278 * Displays this menu at a specific xy position
279 * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
280 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
282 </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">){
283 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
284 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
285 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
287 </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">){
288 </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">);
289 </span><span class="jsdoc-comment">//xy = this.el.adjustForConstraints(xy);
290 </span><span class="jsdoc-syntax">}
292 </span><span class="jsdoc-comment">//this.el.show();
293 </span><span class="jsdoc-var">this.hideMenuItems</span><span class="jsdoc-syntax">();
294 </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
295 </span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
296 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
298 </span><span class="jsdoc-comment">// reassign x when hitting right
299 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0] >= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">()){
300 </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0] = </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0] - </span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.triggerEl.getWidth</span><span class="jsdoc-syntax">();
303 </span><span class="jsdoc-comment">// reassign y when hitting bottom
304 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1] >= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()){
305 </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1] = </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1] - </span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.triggerEl.getHeight</span><span class="jsdoc-syntax">();
308 </span><span class="jsdoc-comment">// but the list may align on trigger left or trigger top... should it be a properity?
310 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'auto' </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.slice</span><span class="jsdoc-syntax">(-1) != </span><span class="jsdoc-string">"%"</span><span class="jsdoc-syntax">){
311 </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
314 </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
315 </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">);
318 </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
319 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
320 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
321 </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">);
325 </span><span class="jsdoc-var">doFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
326 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
327 </span><span class="jsdoc-var">this.focusEl.focus</span><span class="jsdoc-syntax">();
331 </span><span class="jsdoc-comment">/**
332 * Hides this menu and optionally all parent menus
333 * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
335 </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">)
337 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">=== </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">)) {
338 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hide canceled"</span><span class="jsdoc-syntax">);
339 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
341 </span><span class="jsdoc-var">this.hideMenuItems</span><span class="jsdoc-syntax">();
342 </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-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">){
345 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
346 </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
348 </span><span class="jsdoc-var">this.triggerEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);;
349 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</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-var">onTriggerClick </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">)
360 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger click'</span><span class="jsdoc-syntax">);
362 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">();
364 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target.nodeName.toLowerCase</span><span class="jsdoc-syntax">());
366 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target.nodeName.toLowerCase</span><span class="jsdoc-syntax">() === </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">){
367 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
372 </span><span class="jsdoc-var">onTriggerPress </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">)
374 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger press'</span><span class="jsdoc-syntax">);
375 </span><span class="jsdoc-comment">//Roo.log(e.getTarget());
376 // Roo.log(this.triggerEl.dom);
378 // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
379 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">());
380 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pel.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.dropdown-menu'</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">pel.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.treeview-menu'</span><span class="jsdoc-syntax">) ) {
381 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'is treeview or dropdown?'</span><span class="jsdoc-syntax">);
382 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
385 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.nodeName.toLowerCase</span><span class="jsdoc-syntax">() !== </span><span class="jsdoc-string">'i' </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.isLink</span><span class="jsdoc-syntax">){
386 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
389 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()) {
390 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">);
391 </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
392 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
393 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
394 </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'?'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
397 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stopEvent </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.nodeName.toLowerCase</span><span class="jsdoc-syntax">() === </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">){
398 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
404 </span><span class="jsdoc-var">hideMenuItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
406 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hide Menu Items"</span><span class="jsdoc-syntax">);
407 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">) {
408 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
411 </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.open'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aa</span><span class="jsdoc-syntax">) {
413 </span><span class="jsdoc-var">aa.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
417 </span><span class="jsdoc-var">addxtypeChild </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">) {
418 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">comp</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.Menu.superclass.addxtypeChild.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tree</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cntr</span><span class="jsdoc-syntax">);
420 </span><span class="jsdoc-var">this.menuitems.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">comp</span><span class="jsdoc-syntax">);
421 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">comp</span><span class="jsdoc-syntax">;
424 </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
426 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
427 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
430 </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
432 </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
433 </span><span class="jsdoc-var">this.menuitems.clear</span><span class="jsdoc-syntax">();
438 </span></code></body></html>