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)
16 * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger.
17 * @cfg {String} align default tl-bl? == below - how the menu should be aligned.
21 * @param {Object} config The config object
25 </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">){
27 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'treeview'</span><span class="jsdoc-syntax">) {
28 </span><span class="jsdoc-comment">// normally menu's are drawn attached to the document to handle layering etc..
29 // however treeview (used by the docs menu is drawn into the parent element)
30 </span><span class="jsdoc-var">this.container_method </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'getChildContainer'</span><span class="jsdoc-syntax">;
33 </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">);
34 </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">) {
35 </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">);
39 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
40 </span><span class="jsdoc-comment">/**
42 * Fires before this menu is displayed (return false to block)
43 * @param {Roo.menu.Menu} this
45 </span><span class="jsdoc-var">beforeshow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
46 </span><span class="jsdoc-comment">/**
48 * Fires before this menu is hidden (return false to block)
49 * @param {Roo.menu.Menu} this
51 </span><span class="jsdoc-var">beforehide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
52 </span><span class="jsdoc-comment">/**
54 * Fires after this menu is displayed
55 * @param {Roo.menu.Menu} this
57 </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
58 </span><span class="jsdoc-comment">/**
60 * Fires after this menu is hidden
61 * @param {Roo.menu.Menu} this
63 </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
64 </span><span class="jsdoc-comment">/**
66 * Fires when this menu is clicked (or when the enter key is pressed while it is active)
67 * @param {Roo.menu.Menu} this
68 * @param {Roo.menu.Item} menuItem The menu item that was clicked
69 * @param {Roo.EventObject} e
71 </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
72 </span><span class="jsdoc-comment">/**
74 * Fires when the mouse is hovering over this menu
75 * @param {Roo.menu.Menu} this
76 * @param {Roo.EventObject} e
77 * @param {Roo.menu.Item} menuItem The menu item that was clicked
79 </span><span class="jsdoc-var">mouseover </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
80 </span><span class="jsdoc-comment">/**
82 * Fires when the mouse exits this menu
83 * @param {Roo.menu.Menu} this
84 * @param {Roo.EventObject} e
85 * @param {Roo.menu.Item} menuItem The menu item that was clicked
87 </span><span class="jsdoc-var">mouseout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
88 </span><span class="jsdoc-comment">/**
90 * Fires when a menu item contained in this menu is clicked
91 * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
92 * @param {Roo.EventObject} e
94 </span><span class="jsdoc-var">itemclick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
95 </span><span class="jsdoc-syntax">});
96 </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">; });
99 </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">, {
101 </span><span class="jsdoc-comment">/// html : false,
103 </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()???
104 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
105 </span><span class="jsdoc-comment">/**
106 * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
108 </span><span class="jsdoc-var">registerMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
110 </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..
112 </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
114 </span><span class="jsdoc-var">parentMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
116 </span><span class="jsdoc-var">stopEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
118 </span><span class="jsdoc-var">isLink </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
120 </span><span class="jsdoc-var">container_method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'getDocumentBody'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// so the menu is rendered on the body and zIndex works.
122 </span><span class="jsdoc-var">hideTrigger </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
124 </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tl-bl?'</span><span class="jsdoc-syntax">,
127 </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
128 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
131 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
133 </span><span class="jsdoc-comment">//if (['right'].indexOf(this.align)!==-1) {
134 // cfg.cn[1].cls += ' pull-right'
137 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
138 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
139 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'dropdown-menu shadow' </span><span class="jsdoc-syntax">,
140 </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'z-index:1000'
142 </span><span class="jsdoc-syntax">};
144 </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">) {
145 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'submenu active'</span><span class="jsdoc-syntax">;
147 </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">) {
148 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'treeview-menu'</span><span class="jsdoc-syntax">;
151 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
153 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
155 </span><span class="jsdoc-comment">// Roo.log("ADD event");
156 // Roo.log(this.triggerEl.dom);
157 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
159 </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">);
161 </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">);
163 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hideTrigger</span><span class="jsdoc-syntax">) {
164 </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">) {
165 </span><span class="jsdoc-comment">// dropdown toggle on the 'a' in BS4?
166 </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">);
167 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
168 </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">);
173 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
174 </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">);
176 </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">);
178 </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">);
179 </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">);
183 </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">)
185 </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">);
186 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
187 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
189 </span><span class="jsdoc-comment">//Roo.log(t); Roo.log(t.id);
190 </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">){
191 </span><span class="jsdoc-comment">//Roo.log(this.menuitems);
192 </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">);
194 </span><span class="jsdoc-comment">//return this.items.get(t.menuItemId);
195 </span><span class="jsdoc-syntax">}
197 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
200 </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">)
202 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"menu.onTouch"</span><span class="jsdoc-syntax">);
203 </span><span class="jsdoc-comment">//e.stopEvent(); this make the user popdown broken
204 </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
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">)
209 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"menu.onClick"</span><span class="jsdoc-syntax">);
211 </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">);
212 </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">){
213 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
215 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
216 </span><span class="jsdoc-comment">/*
217 if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
218 if(t == this.activeItem && t.shouldDeactivate(e)){
219 this.activeItem.deactivate();
220 delete this.activeItem;
224 this.setActiveItem(t, true);
232 </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">);
234 </span><span class="jsdoc-var">t.onClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
236 </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">);
238 </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">;
240 </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">){
241 (</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);
246 </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">){
247 </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">);
248 </span><span class="jsdoc-comment">//Roo.log(t);
250 // if(t.canActivate && !t.disabled){
251 // this.setActiveItem(t, true);
255 </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">);
257 </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
258 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">;
260 </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">){
261 </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">);
263 </span><span class="jsdoc-comment">//if(t ){
264 // if(t == this.activeItem && t.shouldDeactivate(e)){
265 // this.activeItem.deactivate();
266 // delete this.activeItem;
269 </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">);
273 </span><span class="jsdoc-comment">/**
274 * Displays this menu relative to another element
275 * @param {String/HTMLElement/Roo.Element} element The element to align to
276 * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
277 * the element (defaults to this.defaultAlign)
278 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
280 </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">)
282 </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">)) {
283 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"show canceled"</span><span class="jsdoc-syntax">);
284 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
286 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
287 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
288 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
290 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// show otherwise we do not know how big we are..
292 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </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">);
294 </span><span class="jsdoc-comment">// bl-tl << left align below
295 // tl-bl << left align
297 </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">()){
298 </span><span class="jsdoc-comment">// if it goes to far to the right.. -> align left.
299 </span><span class="jsdoc-var">xy </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">this.align.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'/l/g'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'r'</span><span class="jsdoc-syntax">))
301 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0] < 0){
302 </span><span class="jsdoc-comment">// was left align - go right?
303 </span><span class="jsdoc-var">xy </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">this.align.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'/r/g'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'l'</span><span class="jsdoc-syntax">))
306 </span><span class="jsdoc-comment">// goes down the bottom
307 </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">() ||
308 </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1] < 0 ){
309 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.align.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'?'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">);
310 </span><span class="jsdoc-var">xy </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">a</span><span class="jsdoc-syntax">[1] + </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[0] + </span><span class="jsdoc-string">'?'</span><span class="jsdoc-syntax">)
314 </span><span class="jsdoc-var">this.showAt</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-keyword">false</span><span class="jsdoc-syntax">);
316 </span><span class="jsdoc-comment">/**
317 * Displays this menu at a specific xy position
318 * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
319 * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
321 </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">){
322 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
323 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
324 </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
326 </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">){
327 </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">);
328 </span><span class="jsdoc-comment">//xy = this.el.adjustForConstraints(xy);
329 </span><span class="jsdoc-syntax">}
331 </span><span class="jsdoc-comment">//this.el.show();
332 </span><span class="jsdoc-var">this.hideMenuItems</span><span class="jsdoc-syntax">();
333 </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
334 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
335 </span><span class="jsdoc-var">this.triggerEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
338 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
342 </span><span class="jsdoc-comment">// reassign x when hitting right
344 // reassign y when hitting bottom
346 // but the list may align on trigger left or trigger top... should it be a properity?
348 </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">){
349 </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">);
352 </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
353 </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">);
356 </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
357 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
358 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
359 </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">);
363 </span><span class="jsdoc-var">doFocus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
364 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">){
365 </span><span class="jsdoc-var">this.focusEl.focus</span><span class="jsdoc-syntax">();
369 </span><span class="jsdoc-comment">/**
370 * Hides this menu and optionally all parent menus
371 * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
373 </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">)
375 </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">)) {
376 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"hide canceled"</span><span class="jsdoc-syntax">);
377 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
379 </span><span class="jsdoc-var">this.hideMenuItems</span><span class="jsdoc-syntax">();
380 </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">()){
382 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeItem</span><span class="jsdoc-syntax">){
383 </span><span class="jsdoc-var">this.activeItem.deactivate</span><span class="jsdoc-syntax">();
384 </span><span class="jsdoc-var">this.activeItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
386 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.triggerEl</span><span class="jsdoc-syntax">) {
387 </span><span class="jsdoc-var">this.triggerEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
390 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
391 </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
392 </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">);
394 </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">){
395 </span><span class="jsdoc-var">this.parentMenu.hide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
399 </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">)
401 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger click'</span><span class="jsdoc-syntax">);
403 </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">();
405 </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">());
407 </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">){
408 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
413 </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">)
415 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'trigger press'</span><span class="jsdoc-syntax">);
416 </span><span class="jsdoc-comment">//Roo.log(e.getTarget());
417 // Roo.log(this.triggerEl.dom);
419 // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
420 </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">());
421 </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">) ) {
422 </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">);
423 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
426 </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">){
427 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
430 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isVisible</span><span class="jsdoc-syntax">()) {
431 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">);
432 </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
433 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
434 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
436 </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-var">this.align</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
439 </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">){
440 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
446 </span><span class="jsdoc-var">hideMenuItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
448 </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">);
449 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">) {
450 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
453 </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">) {
455 </span><span class="jsdoc-var">aa.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'open'</span><span class="jsdoc-syntax">);
459 </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">) {
460 </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">);
462 </span><span class="jsdoc-var">this.menuitems.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">comp</span><span class="jsdoc-syntax">);
463 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">comp</span><span class="jsdoc-syntax">;
466 </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
468 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
469 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
472 </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
474 </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">;
475 </span><span class="jsdoc-var">this.menuitems.clear</span><span class="jsdoc-syntax">();
480 </span></code></body></html>