src/widgets/menu/Menu.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 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: '&#160;'
 461                 }),
 462                 bottom: this.el.createChild({
 463                     tag: 'div',
 464                     cls: 'x-menu-scroller x-menu-scroller-bottom',
 465                     html: '&#160;'
 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         if (!config.isXType) {
 571             if (!config.xtype && Ext.isBoolean(config.checked)) {
 572                 return new Ext.menu.CheckItem(config);
 573             }
 574             return Ext.create(config, this.defaultType);
 575         }
 576         return config;
 577     },
 578
 579     /**
 580      * Adds a separator bar to the menu
 581      * @return {Ext.menu.Item} The menu item that was added
 582      */
 583     addSeparator : function() {
 584         return this.add(new Ext.menu.Separator());
 585     },
 586
 587     /**
 588      * Adds an {@link Ext.Element} object to the menu
 589      * @param {Mixed} el The element or DOM node to add, or its id
 590      * @return {Ext.menu.Item} The menu item that was added
 591      */
 592     addElement : function(el) {
 593         return this.add(new Ext.menu.BaseItem({
 594             el: el
 595         }));
 596     },
 597
 598     /**
 599      * Adds an existing object based on {@link Ext.menu.BaseItem} to the menu
 600      * @param {Ext.menu.Item} item The menu item to add
 601      * @return {Ext.menu.Item} The menu item that was added
 602      */
 603     addItem : function(item) {
 604         return this.add(item);
 605     },
 606
 607     /**
 608      * Creates a new {@link Ext.menu.Item} based an the supplied config object and adds it to the menu
 609      * @param {Object} config A MenuItem config object
 610      * @return {Ext.menu.Item} The menu item that was added
 611      */
 612     addMenuItem : function(config) {
 613         return this.add(this.getMenuItem(config));
 614     },
 615
 616     /**
 617      * Creates a new {@link Ext.menu.TextItem} with the supplied text and adds it to the menu
 618      * @param {String} text The text to display in the menu item
 619      * @return {Ext.menu.Item} The menu item that was added
 620      */
 621     addText : function(text){
 622         return this.add(new Ext.menu.TextItem(text));
 623     },
 624
 625     //private
 626     onDestroy : function(){
 627         Ext.EventManager.removeResizeListener(this.hide, this);
 628         var pm = this.parentMenu;
 629         if(pm && pm.activeChild == this){
 630             delete pm.activeChild;
 631         }
 632         delete this.parentMenu;
 633         Ext.menu.Menu.superclass.onDestroy.call(this);
 634         Ext.menu.MenuMgr.unregister(this);
 635         if(this.keyNav) {
 636             this.keyNav.disable();
 637         }
 638         var s = this.scroller;
 639         if(s){
 640             Ext.destroy(s.topRepeater, s.bottomRepeater, s.top, s.bottom);
 641         }
 642         Ext.destroy(
 643             this.el,
 644             this.focusEl,
 645             this.ul
 646         );
 647     }
 648 });
 649
 650 Ext.reg('menu', Ext.menu.Menu);
 651
 652 // MenuNav is a private utility class used internally by the Menu
 653 Ext.menu.MenuNav = Ext.extend(Ext.KeyNav, function(){
 654     function up(e, m){
 655         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
 656             m.tryActivate(m.items.length-1, -1);
 657         }
 658     }
 659     function down(e, m){
 660         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
 661             m.tryActivate(0, 1);
 662         }
 663     }
 664     return {
 665         constructor : function(menu){
 666             Ext.menu.MenuNav.superclass.constructor.call(this, menu.el);
 667             this.scope = this.menu = menu;
 668         },
 669
 670         doRelay : function(e, h){
 671             var k = e.getKey();
 672 //          Keystrokes within a form Field (e.g.: down in a Combo) do not navigate. Allow only TAB
 673             if (this.menu.activeItem && this.menu.activeItem.isFormField && k != e.TAB) {
 674                 return false;
 675             }
 676             if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
 677                 this.menu.tryActivate(0, 1);
 678                 return false;
 679             }
 680             return h.call(this.scope || this, e, this.menu);
 681         },
 682
 683         tab: function(e, m) {
 684             e.stopEvent();
 685             if (e.shiftKey) {
 686                 up(e, m);
 687             } else {
 688                 down(e, m);
 689             }
 690         },
 691
 692         up : up,
 693
 694         down : down,
 695
 696         right : function(e, m){
 697             if(m.activeItem){
 698                 m.activeItem.expandMenu(true);
 699             }
 700         },
 701
 702         left : function(e, m){
 703             m.hide();
 704             if(m.parentMenu && m.parentMenu.activeItem){
 705                 m.parentMenu.activeItem.activate();
 706             }
 707         },
 708
 709         enter : function(e, m){
 710             if(m.activeItem){
 711                 e.stopPropagation();
 712                 m.activeItem.onClick(e);
 713                 m.fireEvent('click', this, m.activeItem);
 714                 return true;
 715             }
 716         }
 717     };
 718 }());