src/widgets/menu/Menu.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.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.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         if(full > max && max > 0){
 437             this.activeMax = max - this.scrollerHeight * 2 - this.el.getFrameWidth('tb') - Ext.num(this.el.shadowOffset, 0);
 438             this.ul.setHeight(this.activeMax);
 439             this.createScrollers();
 440             this.el.select('.x-menu-scroller').setDisplayed('');
 441         }else{
 442             this.ul.setHeight(full);
 443             this.el.select('.x-menu-scroller').setDisplayed('none');
 444         }
 445         this.ul.dom.scrollTop = 0;
 446         return returnY;
 447     },
 448
 449     createScrollers : function(){
 450         if(!this.scroller){
 451             this.scroller = {
 452                 pos: 0,
 453                 top: this.el.insertFirst({
 454                     tag: 'div',
 455                     cls: 'x-menu-scroller x-menu-scroller-top',
 456                     html: '&#160;'
 457                 }),
 458                 bottom: this.el.createChild({
 459                     tag: 'div',
 460                     cls: 'x-menu-scroller x-menu-scroller-bottom',
 461                     html: '&#160;'
 462                 })
 463             };
 464             this.scroller.top.hover(this.onScrollerIn, this.onScrollerOut, this);
 465             this.scroller.topRepeater = new Ext.util.ClickRepeater(this.scroller.top, {
 466                 listeners: {
 467                     click: this.onScroll.createDelegate(this, [null, this.scroller.top], false)
 468                 }
 469             });
 470             this.scroller.bottom.hover(this.onScrollerIn, this.onScrollerOut, this);
 471             this.scroller.bottomRepeater = new Ext.util.ClickRepeater(this.scroller.bottom, {
 472                 listeners: {
 473                     click: this.onScroll.createDelegate(this, [null, this.scroller.bottom], false)
 474                 }
 475             });
 476         }
 477     },
 478
 479     onLayout : function(){
 480         if(this.isVisible()){
 481             if(this.enableScrolling){
 482                 this.constrainScroll(this.el.getTop());
 483             }
 484             if(this.floating){
 485                 this.el.sync();
 486             }
 487         }
 488     },
 489
 490     focus : function(){
 491         if(!this.hidden){
 492             this.doFocus.defer(50, this);
 493         }
 494     },
 495
 496     doFocus : function(){
 497         if(!this.hidden){
 498             this.focusEl.focus();
 499         }
 500     },
 501
 502     /**
 503      * Hides this menu and optionally all parent menus
 504      * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
 505      */
 506     hide : function(deep){
 507         if (!this.isDestroyed) {
 508             this.deepHide = deep;
 509             Ext.menu.Menu.superclass.hide.call(this);
 510             delete this.deepHide;
 511         }
 512     },
 513
 514     // private
 515     onHide : function(){
 516         Ext.menu.Menu.superclass.onHide.call(this);
 517         this.deactivateActive();
 518         if(this.el && this.floating){
 519             this.el.hide();
 520         }
 521         var pm = this.parentMenu;
 522         if(this.deepHide === true && pm){
 523             if(pm.floating){
 524                 pm.hide(true);
 525             }else{
 526                 pm.deactivateActive();
 527             }
 528         }
 529     },
 530
 531     // private
 532     lookupComponent : function(c){
 533          if(Ext.isString(c)){
 534             c = (c == 'separator' || c == '-') ? new Ext.menu.Separator() : new Ext.menu.TextItem(c);
 535              this.applyDefaults(c);
 536          }else{
 537             if(Ext.isObject(c)){
 538                 c = this.getMenuItem(c);
 539             }else if(c.tagName || c.el){ // element. Wrap it.
 540                 c = new Ext.BoxComponent({
 541                     el: c
 542                 });
 543             }
 544          }
 545          return c;
 546     },
 547
 548     applyDefaults : function(c){
 549         if(!Ext.isString(c)){
 550             c = Ext.menu.Menu.superclass.applyDefaults.call(this, c);
 551             var d = this.internalDefaults;
 552             if(d){
 553                 if(c.events){
 554                     Ext.applyIf(c.initialConfig, d);
 555                     Ext.apply(c, d);
 556                 }else{
 557                     Ext.applyIf(c, d);
 558                 }
 559             }
 560         }
 561         return c;
 562     },
 563
 564     // private
 565     getMenuItem : function(config){
 566        if(!config.isXType){
 567             if(!config.xtype && Ext.isBoolean(config.checked)){
 568                 return new Ext.menu.CheckItem(config)
 569             }
 570             return Ext.create(config, this.defaultType);
 571         }
 572         return config;
 573     },
 574
 575     /**
 576      * Adds a separator bar to the menu
 577      * @return {Ext.menu.Item} The menu item that was added
 578      */
 579     addSeparator : function(){
 580         return this.add(new Ext.menu.Separator());
 581     },
 582
 583     /**
 584      * Adds an {@link Ext.Element} object to the menu
 585      * @param {Mixed} el The element or DOM node to add, or its id
 586      * @return {Ext.menu.Item} The menu item that was added
 587      */
 588     addElement : function(el){
 589         return this.add(new Ext.menu.BaseItem({
 590             el: el
 591         }));
 592     },
 593
 594     /**
 595      * Adds an existing object based on {@link Ext.menu.BaseItem} to the menu
 596      * @param {Ext.menu.Item} item The menu item to add
 597      * @return {Ext.menu.Item} The menu item that was added
 598      */
 599     addItem : function(item){
 600         return this.add(item);
 601     },
 602
 603     /**
 604      * Creates a new {@link Ext.menu.Item} based an the supplied config object and adds it to the menu
 605      * @param {Object} config A MenuItem config object
 606      * @return {Ext.menu.Item} The menu item that was added
 607      */
 608     addMenuItem : function(config){
 609         return this.add(this.getMenuItem(config));
 610     },
 611
 612     /**
 613      * Creates a new {@link Ext.menu.TextItem} with the supplied text and adds it to the menu
 614      * @param {String} text The text to display in the menu item
 615      * @return {Ext.menu.Item} The menu item that was added
 616      */
 617     addText : function(text){
 618         return this.add(new Ext.menu.TextItem(text));
 619     },
 620
 621     //private
 622     onDestroy : function(){
 623         Ext.EventManager.removeResizeListener(this.hide, this);
 624         var pm = this.parentMenu;
 625         if(pm && pm.activeChild == this){
 626             delete pm.activeChild;
 627         }
 628         delete this.parentMenu;
 629         Ext.menu.Menu.superclass.onDestroy.call(this);
 630         Ext.menu.MenuMgr.unregister(this);
 631         if(this.keyNav) {
 632             this.keyNav.disable();
 633         }
 634         var s = this.scroller;
 635         if(s){
 636             Ext.destroy(s.topRepeater, s.bottomRepeater, s.top, s.bottom);
 637         }
 638         Ext.destroy(
 639             this.el,
 640             this.focusEl,
 641             this.ul
 642         );
 643     }
 644 });
 645
 646 Ext.reg('menu', Ext.menu.Menu);
 647
 648 // MenuNav is a private utility class used internally by the Menu
 649 Ext.menu.MenuNav = Ext.extend(Ext.KeyNav, function(){
 650     function up(e, m){
 651         if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
 652             m.tryActivate(m.items.length-1, -1);
 653         }
 654     }
 655     function down(e, m){
 656         if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
 657             m.tryActivate(0, 1);
 658         }
 659     }
 660     return {
 661         constructor : function(menu){
 662             Ext.menu.MenuNav.superclass.constructor.call(this, menu.el);
 663             this.scope = this.menu = menu;
 664         },
 665
 666         doRelay : function(e, h){
 667             var k = e.getKey();
 668 //          Keystrokes within a form Field (e.g.: down in a Combo) do not navigate. Allow only TAB
 669             if (this.menu.activeItem && this.menu.activeItem.isFormField && k != e.TAB) {
 670                 return false;
 671             }
 672             if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
 673                 this.menu.tryActivate(0, 1);
 674                 return false;
 675             }
 676             return h.call(this.scope || this, e, this.menu);
 677         },
 678
 679         tab: function(e, m) {
 680             e.stopEvent();
 681             if (e.shiftKey) {
 682                 up(e, m);
 683             } else {
 684                 down(e, m);
 685             }
 686         },
 687
 688         up : up,
 689
 690         down : down,
 691
 692         right : function(e, m){
 693             if(m.activeItem){
 694                 m.activeItem.expandMenu(true);
 695             }
 696         },
 697
 698         left : function(e, m){
 699             m.hide();
 700             if(m.parentMenu && m.parentMenu.activeItem){
 701                 m.parentMenu.activeItem.activate();
 702             }
 703         },
 704
 705         enter : function(e, m){
 706             if(m.activeItem){
 707                 e.stopPropagation();
 708                 m.activeItem.onClick(e);
 709                 m.fireEvent('click', this, m.activeItem);
 710                 return true;
 711             }
 712         }
 713     };
 714 }());