[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
| 4 | * licensing@sencha.com |
---|
| 5 | * http://www.sencha.com/license |
---|
| 6 | */ |
---|
| 7 | /** |
---|
| 8 | * @class Ext.menu.Menu |
---|
| 9 | * @extends Ext.Container |
---|
| 10 | * <p>A menu object. This is the container to which you may add menu items. Menu can also serve as a base class |
---|
| 11 | * when you want a specialized menu based off of another component (like {@link Ext.menu.DateMenu} for example).</p> |
---|
| 12 | * <p>Menus may contain either {@link Ext.menu.Item menu items}, or general {@link Ext.Component Component}s.</p> |
---|
| 13 | * <p>To make a contained general {@link Ext.Component Component} line up with other {@link Ext.menu.Item menu items} |
---|
| 14 | * specify <tt>iconCls: 'no-icon'</tt>. This reserves a space for an icon, and indents the Component in line |
---|
| 15 | * with the other menu items. See {@link Ext.form.ComboBox}.{@link Ext.form.ComboBox#getListParent getListParent} |
---|
| 16 | * for an example.</p> |
---|
| 17 | * <p>By default, Menus are absolutely positioned, floating Components. By configuring a Menu with |
---|
| 18 | * <b><tt>{@link #floating}:false</tt></b>, a Menu may be used as child of a Container.</p> |
---|
| 19 | * |
---|
| 20 | * @xtype menu |
---|
| 21 | */ |
---|
| 22 | Ext.menu.Menu = Ext.extend(Ext.Container, { |
---|
| 23 | /** |
---|
| 24 | * @cfg {Object} defaults |
---|
| 25 | * A config object that will be applied to all items added to this container either via the {@link #items} |
---|
| 26 | * config or via the {@link #add} method. The defaults config can contain any number of |
---|
| 27 | * name/value property pairs to be added to each item, and should be valid for the types of items |
---|
| 28 | * being added to the menu. |
---|
| 29 | */ |
---|
| 30 | /** |
---|
| 31 | * @cfg {Mixed} items |
---|
| 32 | * An array of items to be added to this menu. Menus may contain either {@link Ext.menu.Item menu items}, |
---|
| 33 | * or general {@link Ext.Component Component}s. |
---|
| 34 | */ |
---|
| 35 | /** |
---|
| 36 | * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120) |
---|
| 37 | */ |
---|
| 38 | minWidth : 120, |
---|
| 39 | /** |
---|
| 40 | * @cfg {Boolean/String} shadow True or 'sides' for the default effect, 'frame' for 4-way shadow, and 'drop' |
---|
| 41 | * for bottom-right shadow (defaults to 'sides') |
---|
| 42 | */ |
---|
| 43 | shadow : 'sides', |
---|
| 44 | /** |
---|
| 45 | * @cfg {String} subMenuAlign The {@link Ext.Element#alignTo} anchor position value to use for submenus of |
---|
| 46 | * this menu (defaults to 'tl-tr?') |
---|
| 47 | */ |
---|
| 48 | subMenuAlign : 'tl-tr?', |
---|
| 49 | /** |
---|
| 50 | * @cfg {String} defaultAlign The default {@link Ext.Element#alignTo} anchor position value for this menu |
---|
| 51 | * relative to its element of origin (defaults to 'tl-bl?') |
---|
| 52 | */ |
---|
| 53 | defaultAlign : 'tl-bl?', |
---|
| 54 | /** |
---|
| 55 | * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false) |
---|
| 56 | */ |
---|
| 57 | allowOtherMenus : false, |
---|
| 58 | /** |
---|
| 59 | * @cfg {Boolean} ignoreParentClicks True to ignore clicks on any item in this menu that is a parent item (displays |
---|
| 60 | * a submenu) so that the submenu is not dismissed when clicking the parent item (defaults to false). |
---|
| 61 | */ |
---|
| 62 | ignoreParentClicks : false, |
---|
| 63 | /** |
---|
| 64 | * @cfg {Boolean} enableScrolling True to allow the menu container to have scroller controls if the menu is too long (defaults to true). |
---|
| 65 | */ |
---|
| 66 | enableScrolling : true, |
---|
| 67 | /** |
---|
| 68 | * @cfg {Number} maxHeight The maximum height of the menu. Only applies when enableScrolling is set to True (defaults to null). |
---|
| 69 | */ |
---|
| 70 | maxHeight : null, |
---|
| 71 | /** |
---|
| 72 | * @cfg {Number} scrollIncrement The amount to scroll the menu. Only applies when enableScrolling is set to True (defaults to 24). |
---|
| 73 | */ |
---|
| 74 | scrollIncrement : 24, |
---|
| 75 | /** |
---|
| 76 | * @cfg {Boolean} showSeparator True to show the icon separator. (defaults to true). |
---|
| 77 | */ |
---|
| 78 | showSeparator : true, |
---|
| 79 | /** |
---|
| 80 | * @cfg {Array} defaultOffsets An array specifying the [x, y] offset in pixels by which to |
---|
| 81 | * change the default Menu popup position after aligning according to the {@link #defaultAlign} |
---|
| 82 | * configuration. Defaults to <tt>[0, 0]</tt>. |
---|
| 83 | */ |
---|
| 84 | defaultOffsets : [0, 0], |
---|
| 85 | |
---|
| 86 | /** |
---|
| 87 | * @cfg {Boolean} plain |
---|
| 88 | * True to remove the incised line down the left side of the menu. Defaults to <tt>false</tt>. |
---|
| 89 | */ |
---|
| 90 | plain : false, |
---|
| 91 | |
---|
| 92 | /** |
---|
| 93 | * @cfg {Boolean} floating |
---|
| 94 | * <p>By default, a Menu configured as <b><code>floating:true</code></b> |
---|
| 95 | * will be rendered as an {@link Ext.Layer} (an absolutely positioned, |
---|
| 96 | * floating Component with zindex=15000). |
---|
| 97 | * If configured as <b><code>floating:false</code></b>, the Menu may be |
---|
| 98 | * used as child item of another Container instead of a free-floating |
---|
| 99 | * {@link Ext.Layer Layer}. |
---|
| 100 | */ |
---|
| 101 | floating : true, |
---|
| 102 | |
---|
| 103 | |
---|
| 104 | /** |
---|
| 105 | * @cfg {Number} zIndex |
---|
| 106 | * zIndex to use when the menu is floating. |
---|
| 107 | */ |
---|
| 108 | zIndex: 15000, |
---|
| 109 | |
---|
| 110 | // private |
---|
| 111 | hidden : true, |
---|
| 112 | |
---|
| 113 | /** |
---|
| 114 | * @cfg {String/Object} layout |
---|
| 115 | * This class assigns a default layout (<code>layout:'<b>menu</b>'</code>). |
---|
| 116 | * Developers <i>may</i> override this configuration option if another layout is required. |
---|
| 117 | * See {@link Ext.Container#layout} for additional information. |
---|
| 118 | */ |
---|
| 119 | layout : 'menu', |
---|
| 120 | hideMode : 'offsets', // Important for laying out Components |
---|
| 121 | scrollerHeight : 8, |
---|
| 122 | autoLayout : true, // Provided for backwards compat |
---|
| 123 | defaultType : 'menuitem', |
---|
| 124 | bufferResize : false, |
---|
| 125 | |
---|
| 126 | initComponent : function(){ |
---|
| 127 | if(Ext.isArray(this.initialConfig)){ |
---|
| 128 | Ext.apply(this, {items:this.initialConfig}); |
---|
| 129 | } |
---|
| 130 | this.addEvents( |
---|
| 131 | /** |
---|
| 132 | * @event click |
---|
| 133 | * Fires when this menu is clicked (or when the enter key is pressed while it is active) |
---|
| 134 | * @param {Ext.menu.Menu} this |
---|
| 135 | * @param {Ext.menu.Item} menuItem The menu item that was clicked |
---|
| 136 | * @param {Ext.EventObject} e |
---|
| 137 | */ |
---|
| 138 | 'click', |
---|
| 139 | /** |
---|
| 140 | * @event mouseover |
---|
| 141 | * Fires when the mouse is hovering over this menu |
---|
| 142 | * @param {Ext.menu.Menu} this |
---|
| 143 | * @param {Ext.EventObject} e |
---|
| 144 | * @param {Ext.menu.Item} menuItem The menu item that was clicked |
---|
| 145 | */ |
---|
| 146 | 'mouseover', |
---|
| 147 | /** |
---|
| 148 | * @event mouseout |
---|
| 149 | * Fires when the mouse exits this menu |
---|
| 150 | * @param {Ext.menu.Menu} this |
---|
| 151 | * @param {Ext.EventObject} e |
---|
| 152 | * @param {Ext.menu.Item} menuItem The menu item that was clicked |
---|
| 153 | */ |
---|
| 154 | 'mouseout', |
---|
| 155 | /** |
---|
| 156 | * @event itemclick |
---|
| 157 | * Fires when a menu item contained in this menu is clicked |
---|
| 158 | * @param {Ext.menu.BaseItem} baseItem The BaseItem that was clicked |
---|
| 159 | * @param {Ext.EventObject} e |
---|
| 160 | */ |
---|
| 161 | 'itemclick' |
---|
| 162 | ); |
---|
| 163 | Ext.menu.MenuMgr.register(this); |
---|
| 164 | if(this.floating){ |
---|
| 165 | Ext.EventManager.onWindowResize(this.hide, this); |
---|
| 166 | }else{ |
---|
| 167 | if(this.initialConfig.hidden !== false){ |
---|
| 168 | this.hidden = false; |
---|
| 169 | } |
---|
| 170 | this.internalDefaults = {hideOnClick: false}; |
---|
| 171 | } |
---|
| 172 | Ext.menu.Menu.superclass.initComponent.call(this); |
---|
| 173 | if(this.autoLayout){ |
---|
| 174 | var fn = this.doLayout.createDelegate(this, []); |
---|
| 175 | this.on({ |
---|
| 176 | add: fn, |
---|
| 177 | remove: fn |
---|
| 178 | }); |
---|
| 179 | } |
---|
| 180 | }, |
---|
| 181 | |
---|
| 182 | //private |
---|
| 183 | getLayoutTarget : function() { |
---|
| 184 | return this.ul; |
---|
| 185 | }, |
---|
| 186 | |
---|
| 187 | // private |
---|
| 188 | onRender : function(ct, position){ |
---|
| 189 | if(!ct){ |
---|
| 190 | ct = Ext.getBody(); |
---|
| 191 | } |
---|
| 192 | |
---|
| 193 | var dh = { |
---|
| 194 | id: this.getId(), |
---|
| 195 | cls: 'x-menu ' + ((this.floating) ? 'x-menu-floating x-layer ' : '') + (this.cls || '') + (this.plain ? ' x-menu-plain' : '') + (this.showSeparator ? '' : ' x-menu-nosep'), |
---|
| 196 | style: this.style, |
---|
| 197 | cn: [ |
---|
| 198 | {tag: 'a', cls: 'x-menu-focus', href: '#', onclick: 'return false;', tabIndex: '-1'}, |
---|
| 199 | {tag: 'ul', cls: 'x-menu-list'} |
---|
| 200 | ] |
---|
| 201 | }; |
---|
| 202 | if(this.floating){ |
---|
| 203 | this.el = new Ext.Layer({ |
---|
| 204 | shadow: this.shadow, |
---|
| 205 | dh: dh, |
---|
| 206 | constrain: false, |
---|
| 207 | parentEl: ct, |
---|
| 208 | zindex: this.zIndex |
---|
| 209 | }); |
---|
| 210 | }else{ |
---|
| 211 | this.el = ct.createChild(dh); |
---|
| 212 | } |
---|
| 213 | Ext.menu.Menu.superclass.onRender.call(this, ct, position); |
---|
| 214 | |
---|
| 215 | if(!this.keyNav){ |
---|
| 216 | this.keyNav = new Ext.menu.MenuNav(this); |
---|
| 217 | } |
---|
| 218 | // generic focus element |
---|
| 219 | this.focusEl = this.el.child('a.x-menu-focus'); |
---|
| 220 | this.ul = this.el.child('ul.x-menu-list'); |
---|
| 221 | this.mon(this.ul, { |
---|
| 222 | scope: this, |
---|
| 223 | click: this.onClick, |
---|
| 224 | mouseover: this.onMouseOver, |
---|
| 225 | mouseout: this.onMouseOut |
---|
| 226 | }); |
---|
| 227 | if(this.enableScrolling){ |
---|
| 228 | this.mon(this.el, { |
---|
| 229 | scope: this, |
---|
| 230 | delegate: '.x-menu-scroller', |
---|
| 231 | click: this.onScroll, |
---|
| 232 | mouseover: this.deactivateActive |
---|
| 233 | }); |
---|
| 234 | } |
---|
| 235 | }, |
---|
| 236 | |
---|
| 237 | // private |
---|
| 238 | findTargetItem : function(e){ |
---|
| 239 | var t = e.getTarget('.x-menu-list-item', this.ul, true); |
---|
| 240 | if(t && t.menuItemId){ |
---|
| 241 | return this.items.get(t.menuItemId); |
---|
| 242 | } |
---|
| 243 | }, |
---|
| 244 | |
---|
| 245 | // private |
---|
| 246 | onClick : function(e){ |
---|
| 247 | var t = this.findTargetItem(e); |
---|
| 248 | if(t){ |
---|
| 249 | if(t.isFormField){ |
---|
| 250 | this.setActiveItem(t); |
---|
| 251 | }else if(t instanceof Ext.menu.BaseItem){ |
---|
| 252 | if(t.menu && this.ignoreParentClicks){ |
---|
| 253 | t.expandMenu(); |
---|
| 254 | e.preventDefault(); |
---|
| 255 | }else if(t.onClick){ |
---|
| 256 | t.onClick(e); |
---|
| 257 | this.fireEvent('click', this, t, e); |
---|
| 258 | } |
---|
| 259 | } |
---|
| 260 | } |
---|
| 261 | }, |
---|
| 262 | |
---|
| 263 | // private |
---|
| 264 | setActiveItem : function(item, autoExpand){ |
---|
| 265 | if(item != this.activeItem){ |
---|
| 266 | this.deactivateActive(); |
---|
| 267 | if((this.activeItem = item).isFormField){ |
---|
| 268 | item.focus(); |
---|
| 269 | }else{ |
---|
| 270 | item.activate(autoExpand); |
---|
| 271 | } |
---|
| 272 | }else if(autoExpand){ |
---|
| 273 | item.expandMenu(); |
---|
| 274 | } |
---|
| 275 | }, |
---|
| 276 | |
---|
| 277 | deactivateActive : function(){ |
---|
| 278 | var a = this.activeItem; |
---|
| 279 | if(a){ |
---|
| 280 | if(a.isFormField){ |
---|
| 281 | //Fields cannot deactivate, but Combos must collapse |
---|
| 282 | if(a.collapse){ |
---|
| 283 | a.collapse(); |
---|
| 284 | } |
---|
| 285 | }else{ |
---|
| 286 | a.deactivate(); |
---|
| 287 | } |
---|
| 288 | delete this.activeItem; |
---|
| 289 | } |
---|
| 290 | }, |
---|
| 291 | |
---|
| 292 | // private |
---|
| 293 | tryActivate : function(start, step){ |
---|
| 294 | var items = this.items; |
---|
| 295 | for(var i = start, len = items.length; i >= 0 && i < len; i+= step){ |
---|
| 296 | var item = items.get(i); |
---|
| 297 | if(item.isVisible() && !item.disabled && (item.canActivate || item.isFormField)){ |
---|
| 298 | this.setActiveItem(item, false); |
---|
| 299 | return item; |
---|
| 300 | } |
---|
| 301 | } |
---|
| 302 | return false; |
---|
| 303 | }, |
---|
| 304 | |
---|
| 305 | // private |
---|
| 306 | onMouseOver : function(e){ |
---|
| 307 | var t = this.findTargetItem(e); |
---|
| 308 | if(t){ |
---|
| 309 | if(t.canActivate && !t.disabled){ |
---|
| 310 | this.setActiveItem(t, true); |
---|
| 311 | } |
---|
| 312 | } |
---|
| 313 | this.over = true; |
---|
| 314 | this.fireEvent('mouseover', this, e, t); |
---|
| 315 | }, |
---|
| 316 | |
---|
| 317 | // private |
---|
| 318 | onMouseOut : function(e){ |
---|
| 319 | var t = this.findTargetItem(e); |
---|
| 320 | if(t){ |
---|
| 321 | if(t == this.activeItem && t.shouldDeactivate && t.shouldDeactivate(e)){ |
---|
| 322 | this.activeItem.deactivate(); |
---|
| 323 | delete this.activeItem; |
---|
| 324 | } |
---|
| 325 | } |
---|
| 326 | this.over = false; |
---|
| 327 | this.fireEvent('mouseout', this, e, t); |
---|
| 328 | }, |
---|
| 329 | |
---|
| 330 | // private |
---|
| 331 | onScroll : function(e, t){ |
---|
| 332 | if(e){ |
---|
| 333 | e.stopEvent(); |
---|
| 334 | } |
---|
| 335 | var ul = this.ul.dom, top = Ext.fly(t).is('.x-menu-scroller-top'); |
---|
| 336 | ul.scrollTop += this.scrollIncrement * (top ? -1 : 1); |
---|
| 337 | if(top ? ul.scrollTop <= 0 : ul.scrollTop + this.activeMax >= ul.scrollHeight){ |
---|
| 338 | this.onScrollerOut(null, t); |
---|
| 339 | } |
---|
| 340 | }, |
---|
| 341 | |
---|
| 342 | // private |
---|
| 343 | onScrollerIn : function(e, t){ |
---|
| 344 | var ul = this.ul.dom, top = Ext.fly(t).is('.x-menu-scroller-top'); |
---|
| 345 | if(top ? ul.scrollTop > 0 : ul.scrollTop + this.activeMax < ul.scrollHeight){ |
---|
| 346 | Ext.fly(t).addClass(['x-menu-item-active', 'x-menu-scroller-active']); |
---|
| 347 | } |
---|
| 348 | }, |
---|
| 349 | |
---|
| 350 | // private |
---|
| 351 | onScrollerOut : function(e, t){ |
---|
| 352 | Ext.fly(t).removeClass(['x-menu-item-active', 'x-menu-scroller-active']); |
---|
| 353 | }, |
---|
| 354 | |
---|
| 355 | /** |
---|
| 356 | * If <code>{@link #floating}=true</code>, shows this menu relative to |
---|
| 357 | * another element using {@link #showat}, otherwise uses {@link Ext.Component#show}. |
---|
| 358 | * @param {Mixed} element The element to align to |
---|
| 359 | * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to |
---|
| 360 | * the element (defaults to this.defaultAlign) |
---|
| 361 | * @param {Ext.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined) |
---|
| 362 | */ |
---|
| 363 | show : function(el, pos, parentMenu){ |
---|
| 364 | if(this.floating){ |
---|
| 365 | this.parentMenu = parentMenu; |
---|
| 366 | if(!this.el){ |
---|
| 367 | this.render(); |
---|
| 368 | this.doLayout(false, true); |
---|
| 369 | } |
---|
| 370 | this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign, this.defaultOffsets), parentMenu); |
---|
| 371 | }else{ |
---|
| 372 | Ext.menu.Menu.superclass.show.call(this); |
---|
| 373 | } |
---|
| 374 | }, |
---|
| 375 | |
---|
| 376 | /** |
---|
| 377 | * Displays this menu at a specific xy position and fires the 'show' event if a |
---|
| 378 | * handler for the 'beforeshow' event does not return false cancelling the operation. |
---|
| 379 | * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based) |
---|
| 380 | * @param {Ext.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined) |
---|
| 381 | */ |
---|
| 382 | showAt : function(xy, parentMenu){ |
---|
| 383 | if(this.fireEvent('beforeshow', this) !== false){ |
---|
| 384 | this.parentMenu = parentMenu; |
---|
| 385 | if(!this.el){ |
---|
| 386 | this.render(); |
---|
| 387 | } |
---|
| 388 | if(this.enableScrolling){ |
---|
| 389 | // set the position so we can figure out the constrain value. |
---|
| 390 | this.el.setXY(xy); |
---|
| 391 | //constrain the value, keep the y coordinate the same |
---|
| 392 | xy[1] = this.constrainScroll(xy[1]); |
---|
| 393 | xy = [this.el.adjustForConstraints(xy)[0], xy[1]]; |
---|
| 394 | }else{ |
---|
| 395 | //constrain to the viewport. |
---|
| 396 | xy = this.el.adjustForConstraints(xy); |
---|
| 397 | } |
---|
| 398 | this.el.setXY(xy); |
---|
| 399 | this.el.show(); |
---|
| 400 | Ext.menu.Menu.superclass.onShow.call(this); |
---|
| 401 | if(Ext.isIE){ |
---|
| 402 | // internal event, used so we don't couple the layout to the menu |
---|
| 403 | this.fireEvent('autosize', this); |
---|
| 404 | if(!Ext.isIE8){ |
---|
| 405 | this.el.repaint(); |
---|
| 406 | } |
---|
| 407 | } |
---|
| 408 | this.hidden = false; |
---|
| 409 | this.focus(); |
---|
| 410 | this.fireEvent('show', this); |
---|
| 411 | } |
---|
| 412 | }, |
---|
| 413 | |
---|
| 414 | constrainScroll : function(y){ |
---|
| 415 | var max, full = this.ul.setHeight('auto').getHeight(), |
---|
| 416 | returnY = y, normalY, parentEl, scrollTop, viewHeight; |
---|
| 417 | if(this.floating){ |
---|
| 418 | parentEl = Ext.fly(this.el.dom.parentNode); |
---|
| 419 | scrollTop = parentEl.getScroll().top; |
---|
| 420 | viewHeight = parentEl.getViewSize().height; |
---|
| 421 | //Normalize y by the scroll position for the parent element. Need to move it into the coordinate space |
---|
| 422 | //of the view. |
---|
| 423 | normalY = y - scrollTop; |
---|
| 424 | max = this.maxHeight ? this.maxHeight : viewHeight - normalY; |
---|
| 425 | if(full > viewHeight) { |
---|
| 426 | max = viewHeight; |
---|
| 427 | //Set returnY equal to (0,0) in view space by reducing y by the value of normalY |
---|
| 428 | returnY = y - normalY; |
---|
| 429 | } else if(max < full) { |
---|
| 430 | returnY = y - (full - max); |
---|
| 431 | max = full; |
---|
| 432 | } |
---|
| 433 | }else{ |
---|
| 434 | max = this.getHeight(); |
---|
| 435 | } |
---|
| 436 | // Always respect maxHeight |
---|
| 437 | if (this.maxHeight){ |
---|
| 438 | max = Math.min(this.maxHeight, max); |
---|
| 439 | } |
---|
| 440 | if(full > max && max > 0){ |
---|
| 441 | this.activeMax = max - this.scrollerHeight * 2 - this.el.getFrameWidth('tb') - Ext.num(this.el.shadowOffset, 0); |
---|
| 442 | this.ul.setHeight(this.activeMax); |
---|
| 443 | this.createScrollers(); |
---|
| 444 | this.el.select('.x-menu-scroller').setDisplayed(''); |
---|
| 445 | }else{ |
---|
| 446 | this.ul.setHeight(full); |
---|
| 447 | this.el.select('.x-menu-scroller').setDisplayed('none'); |
---|
| 448 | } |
---|
| 449 | this.ul.dom.scrollTop = 0; |
---|
| 450 | return returnY; |
---|
| 451 | }, |
---|
| 452 | |
---|
| 453 | createScrollers : function(){ |
---|
| 454 | if(!this.scroller){ |
---|
| 455 | this.scroller = { |
---|
| 456 | pos: 0, |
---|
| 457 | top: this.el.insertFirst({ |
---|
| 458 | tag: 'div', |
---|
| 459 | cls: 'x-menu-scroller x-menu-scroller-top', |
---|
| 460 | html: ' ' |
---|
| 461 | }), |
---|
| 462 | bottom: this.el.createChild({ |
---|
| 463 | tag: 'div', |
---|
| 464 | cls: 'x-menu-scroller x-menu-scroller-bottom', |
---|
| 465 | html: ' ' |
---|
| 466 | }) |
---|
| 467 | }; |
---|
| 468 | this.scroller.top.hover(this.onScrollerIn, this.onScrollerOut, this); |
---|
| 469 | this.scroller.topRepeater = new Ext.util.ClickRepeater(this.scroller.top, { |
---|
| 470 | listeners: { |
---|
| 471 | click: this.onScroll.createDelegate(this, [null, this.scroller.top], false) |
---|
| 472 | } |
---|
| 473 | }); |
---|
| 474 | this.scroller.bottom.hover(this.onScrollerIn, this.onScrollerOut, this); |
---|
| 475 | this.scroller.bottomRepeater = new Ext.util.ClickRepeater(this.scroller.bottom, { |
---|
| 476 | listeners: { |
---|
| 477 | click: this.onScroll.createDelegate(this, [null, this.scroller.bottom], false) |
---|
| 478 | } |
---|
| 479 | }); |
---|
| 480 | } |
---|
| 481 | }, |
---|
| 482 | |
---|
| 483 | onLayout : function(){ |
---|
| 484 | if(this.isVisible()){ |
---|
| 485 | if(this.enableScrolling){ |
---|
| 486 | this.constrainScroll(this.el.getTop()); |
---|
| 487 | } |
---|
| 488 | if(this.floating){ |
---|
| 489 | this.el.sync(); |
---|
| 490 | } |
---|
| 491 | } |
---|
| 492 | }, |
---|
| 493 | |
---|
| 494 | focus : function(){ |
---|
| 495 | if(!this.hidden){ |
---|
| 496 | this.doFocus.defer(50, this); |
---|
| 497 | } |
---|
| 498 | }, |
---|
| 499 | |
---|
| 500 | doFocus : function(){ |
---|
| 501 | if(!this.hidden){ |
---|
| 502 | this.focusEl.focus(); |
---|
| 503 | } |
---|
| 504 | }, |
---|
| 505 | |
---|
| 506 | /** |
---|
| 507 | * Hides this menu and optionally all parent menus |
---|
| 508 | * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false) |
---|
| 509 | */ |
---|
| 510 | hide : function(deep){ |
---|
| 511 | if (!this.isDestroyed) { |
---|
| 512 | this.deepHide = deep; |
---|
| 513 | Ext.menu.Menu.superclass.hide.call(this); |
---|
| 514 | delete this.deepHide; |
---|
| 515 | } |
---|
| 516 | }, |
---|
| 517 | |
---|
| 518 | // private |
---|
| 519 | onHide : function(){ |
---|
| 520 | Ext.menu.Menu.superclass.onHide.call(this); |
---|
| 521 | this.deactivateActive(); |
---|
| 522 | if(this.el && this.floating){ |
---|
| 523 | this.el.hide(); |
---|
| 524 | } |
---|
| 525 | var pm = this.parentMenu; |
---|
| 526 | if(this.deepHide === true && pm){ |
---|
| 527 | if(pm.floating){ |
---|
| 528 | pm.hide(true); |
---|
| 529 | }else{ |
---|
| 530 | pm.deactivateActive(); |
---|
| 531 | } |
---|
| 532 | } |
---|
| 533 | }, |
---|
| 534 | |
---|
| 535 | // private |
---|
| 536 | lookupComponent : function(c){ |
---|
| 537 | if(Ext.isString(c)){ |
---|
| 538 | c = (c == 'separator' || c == '-') ? new Ext.menu.Separator() : new Ext.menu.TextItem(c); |
---|
| 539 | this.applyDefaults(c); |
---|
| 540 | }else{ |
---|
| 541 | if(Ext.isObject(c)){ |
---|
| 542 | c = this.getMenuItem(c); |
---|
| 543 | }else if(c.tagName || c.el){ // element. Wrap it. |
---|
| 544 | c = new Ext.BoxComponent({ |
---|
| 545 | el: c |
---|
| 546 | }); |
---|
| 547 | } |
---|
| 548 | } |
---|
| 549 | return c; |
---|
| 550 | }, |
---|
| 551 | |
---|
| 552 | applyDefaults : function(c) { |
---|
| 553 | if (!Ext.isString(c)) { |
---|
| 554 | c = Ext.menu.Menu.superclass.applyDefaults.call(this, c); |
---|
| 555 | var d = this.internalDefaults; |
---|
| 556 | if(d){ |
---|
| 557 | if(c.events){ |
---|
| 558 | Ext.applyIf(c.initialConfig, d); |
---|
| 559 | Ext.apply(c, d); |
---|
| 560 | }else{ |
---|
| 561 | Ext.applyIf(c, d); |
---|
| 562 | } |
---|
| 563 | } |
---|
| 564 | } |
---|
| 565 | return c; |
---|
| 566 | }, |
---|
| 567 | |
---|
| 568 | // private |
---|
| 569 | getMenuItem : function(config) { |
---|
| 570 | config.ownerCt = this; |
---|
| 571 | |
---|
| 572 | if (!config.isXType) { |
---|
| 573 | if (!config.xtype && Ext.isBoolean(config.checked)) { |
---|
| 574 | return new Ext.menu.CheckItem(config); |
---|
| 575 | } |
---|
| 576 | return Ext.create(config, this.defaultType); |
---|
| 577 | } |
---|
| 578 | return config; |
---|
| 579 | }, |
---|
| 580 | |
---|
| 581 | /** |
---|
| 582 | * Adds a separator bar to the menu |
---|
| 583 | * @return {Ext.menu.Item} The menu item that was added |
---|
| 584 | */ |
---|
| 585 | addSeparator : function() { |
---|
| 586 | return this.add(new Ext.menu.Separator()); |
---|
| 587 | }, |
---|
| 588 | |
---|
| 589 | /** |
---|
| 590 | * Adds an {@link Ext.Element} object to the menu |
---|
| 591 | * @param {Mixed} el The element or DOM node to add, or its id |
---|
| 592 | * @return {Ext.menu.Item} The menu item that was added |
---|
| 593 | */ |
---|
| 594 | addElement : function(el) { |
---|
| 595 | return this.add(new Ext.menu.BaseItem({ |
---|
| 596 | el: el |
---|
| 597 | })); |
---|
| 598 | }, |
---|
| 599 | |
---|
| 600 | /** |
---|
| 601 | * Adds an existing object based on {@link Ext.menu.BaseItem} to the menu |
---|
| 602 | * @param {Ext.menu.Item} item The menu item to add |
---|
| 603 | * @return {Ext.menu.Item} The menu item that was added |
---|
| 604 | */ |
---|
| 605 | addItem : function(item) { |
---|
| 606 | return this.add(item); |
---|
| 607 | }, |
---|
| 608 | |
---|
| 609 | /** |
---|
| 610 | * Creates a new {@link Ext.menu.Item} based an the supplied config object and adds it to the menu |
---|
| 611 | * @param {Object} config A MenuItem config object |
---|
| 612 | * @return {Ext.menu.Item} The menu item that was added |
---|
| 613 | */ |
---|
| 614 | addMenuItem : function(config) { |
---|
| 615 | return this.add(this.getMenuItem(config)); |
---|
| 616 | }, |
---|
| 617 | |
---|
| 618 | /** |
---|
| 619 | * Creates a new {@link Ext.menu.TextItem} with the supplied text and adds it to the menu |
---|
| 620 | * @param {String} text The text to display in the menu item |
---|
| 621 | * @return {Ext.menu.Item} The menu item that was added |
---|
| 622 | */ |
---|
| 623 | addText : function(text){ |
---|
| 624 | return this.add(new Ext.menu.TextItem(text)); |
---|
| 625 | }, |
---|
| 626 | |
---|
| 627 | //private |
---|
| 628 | onDestroy : function(){ |
---|
| 629 | Ext.EventManager.removeResizeListener(this.hide, this); |
---|
| 630 | var pm = this.parentMenu; |
---|
| 631 | if(pm && pm.activeChild == this){ |
---|
| 632 | delete pm.activeChild; |
---|
| 633 | } |
---|
| 634 | delete this.parentMenu; |
---|
| 635 | Ext.menu.Menu.superclass.onDestroy.call(this); |
---|
| 636 | Ext.menu.MenuMgr.unregister(this); |
---|
| 637 | if(this.keyNav) { |
---|
| 638 | this.keyNav.disable(); |
---|
| 639 | } |
---|
| 640 | var s = this.scroller; |
---|
| 641 | if(s){ |
---|
| 642 | Ext.destroy(s.topRepeater, s.bottomRepeater, s.top, s.bottom); |
---|
| 643 | } |
---|
| 644 | Ext.destroy( |
---|
| 645 | this.el, |
---|
| 646 | this.focusEl, |
---|
| 647 | this.ul |
---|
| 648 | ); |
---|
| 649 | } |
---|
| 650 | }); |
---|
| 651 | |
---|
| 652 | Ext.reg('menu', Ext.menu.Menu); |
---|
| 653 | |
---|
| 654 | // MenuNav is a private utility class used internally by the Menu |
---|
| 655 | Ext.menu.MenuNav = Ext.extend(Ext.KeyNav, function(){ |
---|
| 656 | function up(e, m){ |
---|
| 657 | if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){ |
---|
| 658 | m.tryActivate(m.items.length-1, -1); |
---|
| 659 | } |
---|
| 660 | } |
---|
| 661 | function down(e, m){ |
---|
| 662 | if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){ |
---|
| 663 | m.tryActivate(0, 1); |
---|
| 664 | } |
---|
| 665 | } |
---|
| 666 | return { |
---|
| 667 | constructor : function(menu){ |
---|
| 668 | Ext.menu.MenuNav.superclass.constructor.call(this, menu.el); |
---|
| 669 | this.scope = this.menu = menu; |
---|
| 670 | }, |
---|
| 671 | |
---|
| 672 | doRelay : function(e, h){ |
---|
| 673 | var k = e.getKey(); |
---|
| 674 | // Keystrokes within a form Field (e.g.: down in a Combo) do not navigate. Allow only TAB |
---|
| 675 | if (this.menu.activeItem && this.menu.activeItem.isFormField && k != e.TAB) { |
---|
| 676 | return false; |
---|
| 677 | } |
---|
| 678 | if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){ |
---|
| 679 | this.menu.tryActivate(0, 1); |
---|
| 680 | return false; |
---|
| 681 | } |
---|
| 682 | return h.call(this.scope || this, e, this.menu); |
---|
| 683 | }, |
---|
| 684 | |
---|
| 685 | tab: function(e, m) { |
---|
| 686 | e.stopEvent(); |
---|
| 687 | if (e.shiftKey) { |
---|
| 688 | up(e, m); |
---|
| 689 | } else { |
---|
| 690 | down(e, m); |
---|
| 691 | } |
---|
| 692 | }, |
---|
| 693 | |
---|
| 694 | up : up, |
---|
| 695 | |
---|
| 696 | down : down, |
---|
| 697 | |
---|
| 698 | right : function(e, m){ |
---|
| 699 | if(m.activeItem){ |
---|
| 700 | m.activeItem.expandMenu(true); |
---|
| 701 | } |
---|
| 702 | }, |
---|
| 703 | |
---|
| 704 | left : function(e, m){ |
---|
| 705 | m.hide(); |
---|
| 706 | if(m.parentMenu && m.parentMenu.activeItem){ |
---|
| 707 | m.parentMenu.activeItem.activate(); |
---|
| 708 | } |
---|
| 709 | }, |
---|
| 710 | |
---|
| 711 | enter : function(e, m){ |
---|
| 712 | if(m.activeItem){ |
---|
| 713 | e.stopPropagation(); |
---|
| 714 | m.activeItem.onClick(e); |
---|
| 715 | m.fireEvent('click', this, m.activeItem); |
---|
| 716 | return true; |
---|
| 717 | } |
---|
| 718 | } |
---|
| 719 | }; |
---|
| 720 | }()); |
---|