pkgs/pkg-menu-debug.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   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.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 }());
 719 /**
 720  * @class Ext.menu.MenuMgr
 721  * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
 722  * @singleton
 723  */
 724 Ext.menu.MenuMgr = function(){
 725    var menus, active, groups = {}, attached = false, lastShow = new Date();
 726
 727    // private - called when first menu is created
 728    function init(){
 729        menus = {};
 730        active = new Ext.util.MixedCollection();
 731        Ext.getDoc().addKeyListener(27, function(){
 732            if(active.length > 0){
 733                hideAll();
 734            }
 735        });
 736    }
 737
 738    // private
 739    function hideAll(){
 740        if(active && active.length > 0){
 741            var c = active.clone();
 742            c.each(function(m){
 743                m.hide();
 744            });
 745            return true;
 746        }
 747        return false;
 748    }
 749
 750    // private
 751    function onHide(m){
 752        active.remove(m);
 753        if(active.length < 1){
 754            Ext.getDoc().un("mousedown", onMouseDown);
 755            attached = false;
 756        }
 757    }
 758
 759    // private
 760    function onShow(m){
 761        var last = active.last();
 762        lastShow = new Date();
 763        active.add(m);
 764        if(!attached){
 765            Ext.getDoc().on("mousedown", onMouseDown);
 766            attached = true;
 767        }
 768        if(m.parentMenu){
 769           m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
 770           m.parentMenu.activeChild = m;
 771        }else if(last && !last.isDestroyed && last.isVisible()){
 772           m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
 773        }
 774    }
 775
 776    // private
 777    function onBeforeHide(m){
 778        if(m.activeChild){
 779            m.activeChild.hide();
 780        }
 781        if(m.autoHideTimer){
 782            clearTimeout(m.autoHideTimer);
 783            delete m.autoHideTimer;
 784        }
 785    }
 786
 787    // private
 788    function onBeforeShow(m){
 789        var pm = m.parentMenu;
 790        if(!pm && !m.allowOtherMenus){
 791            hideAll();
 792        }else if(pm && pm.activeChild){
 793            pm.activeChild.hide();
 794        }
 795    }
 796
 797    // private
 798    function onMouseDown(e){
 799        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
 800            hideAll();
 801        }
 802    }
 803
 804    return {
 805
 806        /**
 807         * Hides all menus that are currently visible
 808         * @return {Boolean} success True if any active menus were hidden.
 809         */
 810        hideAll : function(){
 811             return hideAll();
 812        },
 813
 814        // private
 815        register : function(menu){
 816            if(!menus){
 817                init();
 818            }
 819            menus[menu.id] = menu;
 820            menu.on({
 821                beforehide: onBeforeHide,
 822                hide: onHide,
 823                beforeshow: onBeforeShow,
 824                show: onShow
 825            });
 826        },
 827
 828         /**
 829          * Returns a {@link Ext.menu.Menu} object
 830          * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
 831          * be used to generate and return a new Menu instance.
 832          * @return {Ext.menu.Menu} The specified menu, or null if none are found
 833          */
 834        get : function(menu){
 835            if(typeof menu == "string"){ // menu id
 836                if(!menus){  // not initialized, no menus to return
 837                    return null;
 838                }
 839                return menus[menu];
 840            }else if(menu.events){  // menu instance
 841                return menu;
 842            }else if(typeof menu.length == 'number'){ // array of menu items?
 843                return new Ext.menu.Menu({items:menu});
 844            }else{ // otherwise, must be a config
 845                return Ext.create(menu, 'menu');
 846            }
 847        },
 848
 849        // private
 850        unregister : function(menu){
 851            delete menus[menu.id];
 852            menu.un("beforehide", onBeforeHide);
 853            menu.un("hide", onHide);
 854            menu.un("beforeshow", onBeforeShow);
 855            menu.un("show", onShow);
 856        },
 857
 858        // private
 859        registerCheckable : function(menuItem){
 860            var g = menuItem.group;
 861            if(g){
 862                if(!groups[g]){
 863                    groups[g] = [];
 864                }
 865                groups[g].push(menuItem);
 866            }
 867        },
 868
 869        // private
 870        unregisterCheckable : function(menuItem){
 871            var g = menuItem.group;
 872            if(g){
 873                groups[g].remove(menuItem);
 874            }
 875        },
 876
 877        // private
 878        onCheckChange: function(item, state){
 879            if(item.group && state){
 880                var group = groups[item.group],
 881                    i = 0,
 882                    len = group.length,
 883                    current;
 884
 885                for(; i < len; i++){
 886                    current = group[i];
 887                    if(current != item){
 888                        current.setChecked(false);
 889                    }
 890                }
 891            }
 892        },
 893
 894        getCheckedItem : function(groupId){
 895            var g = groups[groupId];
 896            if(g){
 897                for(var i = 0, l = g.length; i < l; i++){
 898                    if(g[i].checked){
 899                        return g[i];
 900                    }
 901                }
 902            }
 903            return null;
 904        },
 905
 906        setCheckedItem : function(groupId, itemId){
 907            var g = groups[groupId];
 908            if(g){
 909                for(var i = 0, l = g.length; i < l; i++){
 910                    if(g[i].id == itemId){
 911                        g[i].setChecked(true);
 912                    }
 913                }
 914            }
 915            return null;
 916        }
 917    };
 918 }();
 919 /**
 920  * @class Ext.menu.BaseItem
 921  * @extends Ext.Component
 922  * The base class for all items that render into menus.  BaseItem provides default rendering, activated state
 923  * management and base configuration options shared by all menu components.
 924  * @constructor
 925  * Creates a new BaseItem
 926  * @param {Object} config Configuration options
 927  * @xtype menubaseitem
 928  */
 929 Ext.menu.BaseItem = Ext.extend(Ext.Component, {
 930     /**
 931      * @property parentMenu
 932      * @type Ext.menu.Menu
 933      * The parent Menu of this Item.
 934      */
 935     /**
 936      * @cfg {Function} handler
 937      * A function that will handle the click event of this menu item (optional).
 938      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
 939      * <li><code>b</code> : Item<div class="sub-desc">This menu Item.</div></li>
 940      * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
 941      * </ul></div>
 942      */
 943     /**
 944      * @cfg {Object} scope
 945      * The scope (<tt><b>this</b></tt> reference) in which the handler function will be called.
 946      */
 947     /**
 948      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
 949      */
 950     canActivate : false,
 951     /**
 952      * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
 953      */
 954     activeClass : "x-menu-item-active",
 955     /**
 956      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
 957      */
 958     hideOnClick : true,
 959     /**
 960      * @cfg {Number} clickHideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 1)
 961      */
 962     clickHideDelay : 1,
 963
 964     // private
 965     ctype : "Ext.menu.BaseItem",
 966
 967     // private
 968     actionMode : "container",
 969
 970     initComponent : function(){
 971         Ext.menu.BaseItem.superclass.initComponent.call(this);
 972         this.addEvents(
 973             /**
 974              * @event click
 975              * Fires when this item is clicked
 976              * @param {Ext.menu.BaseItem} this
 977              * @param {Ext.EventObject} e
 978              */
 979             'click',
 980             /**
 981              * @event activate
 982              * Fires when this item is activated
 983              * @param {Ext.menu.BaseItem} this
 984              */
 985             'activate',
 986             /**
 987              * @event deactivate
 988              * Fires when this item is deactivated
 989              * @param {Ext.menu.BaseItem} this
 990              */
 991             'deactivate'
 992         );
 993         if(this.handler){
 994             this.on("click", this.handler, this.scope);
 995         }
 996     },
 997
 998     // private
 999     onRender : function(container, position){
1000         Ext.menu.BaseItem.superclass.onRender.apply(this, arguments);
1001         if(this.ownerCt && this.ownerCt instanceof Ext.menu.Menu){
1002             this.parentMenu = this.ownerCt;
1003         }else{
1004             this.container.addClass('x-menu-list-item');
1005             this.mon(this.el, {
1006                 scope: this,
1007                 click: this.onClick,
1008                 mouseenter: this.activate,
1009                 mouseleave: this.deactivate
1010             });
1011         }
1012     },
1013
1014     /**
1015      * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}
1016      * config property).  If an existing handler is already registered, it will be unregistered for you.
1017      * @param {Function} handler The function that should be called on click
1018      * @param {Object} scope The scope (<code>this</code> reference) in which the handler function is executed. Defaults to this menu item.
1019      */
1020     setHandler : function(handler, scope){
1021         if(this.handler){
1022             this.un("click", this.handler, this.scope);
1023         }
1024         this.on("click", this.handler = handler, this.scope = scope);
1025     },
1026
1027     // private
1028     onClick : function(e){
1029         if(!this.disabled && this.fireEvent("click", this, e) !== false
1030                 && (this.parentMenu && this.parentMenu.fireEvent("itemclick", this, e) !== false)){
1031             this.handleClick(e);
1032         }else{
1033             e.stopEvent();
1034         }
1035     },
1036
1037     // private
1038     activate : function(){
1039         if(this.disabled){
1040             return false;
1041         }
1042         var li = this.container;
1043         li.addClass(this.activeClass);
1044         this.region = li.getRegion().adjust(2, 2, -2, -2);
1045         this.fireEvent("activate", this);
1046         return true;
1047     },
1048
1049     // private
1050     deactivate : function(){
1051         this.container.removeClass(this.activeClass);
1052         this.fireEvent("deactivate", this);
1053     },
1054
1055     // private
1056     shouldDeactivate : function(e){
1057         return !this.region || !this.region.contains(e.getPoint());
1058     },
1059
1060     // private
1061     handleClick : function(e){
1062         var pm = this.parentMenu;
1063         if(this.hideOnClick){
1064             if(pm.floating){
1065                 pm.hide.defer(this.clickHideDelay, pm, [true]);
1066             }else{
1067                 pm.deactivateActive();
1068             }
1069         }
1070     },
1071
1072     // private. Do nothing
1073     expandMenu : Ext.emptyFn,
1074
1075     // private. Do nothing
1076     hideMenu : Ext.emptyFn
1077 });
1078 Ext.reg('menubaseitem', Ext.menu.BaseItem);/**
1079  * @class Ext.menu.TextItem
1080  * @extends Ext.menu.BaseItem
1081  * Adds a static text string to a menu, usually used as either a heading or group separator.
1082  * @constructor
1083  * Creates a new TextItem
1084  * @param {Object/String} config If config is a string, it is used as the text to display, otherwise it
1085  * is applied as a config object (and should contain a <tt>text</tt> property).
1086  * @xtype menutextitem
1087  */
1088 Ext.menu.TextItem = Ext.extend(Ext.menu.BaseItem, {
1089     /**
1090      * @cfg {String} text The text to display for this item (defaults to '')
1091      */
1092     /**
1093      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
1094      */
1095     hideOnClick : false,
1096     /**
1097      * @cfg {String} itemCls The default CSS class to use for text items (defaults to "x-menu-text")
1098      */
1099     itemCls : "x-menu-text",
1100
1101     constructor : function(config) {
1102         if (typeof config == 'string') {
1103             config = {
1104                 text: config
1105             };
1106         }
1107         Ext.menu.TextItem.superclass.constructor.call(this, config);
1108     },
1109
1110     // private
1111     onRender : function() {
1112         var s = document.createElement("span");
1113         s.className = this.itemCls;
1114         s.innerHTML = this.text;
1115         this.el = s;
1116         Ext.menu.TextItem.superclass.onRender.apply(this, arguments);
1117     }
1118 });
1119 Ext.reg('menutextitem', Ext.menu.TextItem);/**
1120  * @class Ext.menu.Separator
1121  * @extends Ext.menu.BaseItem
1122  * Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
1123  * add one of these by using "-" in you call to add() or in your items config rather than creating one directly.
1124  * @constructor
1125  * @param {Object} config Configuration options
1126  * @xtype menuseparator
1127  */
1128 Ext.menu.Separator = Ext.extend(Ext.menu.BaseItem, {
1129     /**
1130      * @cfg {String} itemCls The default CSS class to use for separators (defaults to "x-menu-sep")
1131      */
1132     itemCls : "x-menu-sep",
1133     /**
1134      * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to false)
1135      */
1136     hideOnClick : false,
1137
1138     /**
1139      * @cfg {String} activeClass
1140      * @hide
1141      */
1142     activeClass: '',
1143
1144     // private
1145     onRender : function(li){
1146         var s = document.createElement("span");
1147         s.className = this.itemCls;
1148         s.innerHTML = "&#160;";
1149         this.el = s;
1150         li.addClass("x-menu-sep-li");
1151         Ext.menu.Separator.superclass.onRender.apply(this, arguments);
1152     }
1153 });
1154 Ext.reg('menuseparator', Ext.menu.Separator);/**
1155  * @class Ext.menu.Item
1156  * @extends Ext.menu.BaseItem
1157  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
1158  * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
1159  * activation and click handling.
1160  * @constructor
1161  * Creates a new Item
1162  * @param {Object} config Configuration options
1163  * @xtype menuitem
1164  */
1165 Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {
1166     /**
1167      * @property menu
1168      * @type Ext.menu.Menu
1169      * The submenu associated with this Item if one was configured.
1170      */
1171     /**
1172      * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
1173      * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
1174      */
1175     /**
1176      * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
1177      * icon is specified {@link #iconCls} should not be.
1178      */
1179     /**
1180      * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
1181      * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
1182      */
1183     /**
1184      * @cfg {String} text The text to display in this item (defaults to '').
1185      */
1186     /**
1187      * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
1188      */
1189     /**
1190      * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
1191      */
1192     /**
1193      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
1194      */
1195     itemCls : 'x-menu-item',
1196     /**
1197      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
1198      */
1199     canActivate : true,
1200     /**
1201      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
1202      */
1203     showDelay: 200,
1204
1205     /**
1206      * @cfg {String} altText The altText to use for the icon, if it exists. Defaults to <tt>''</tt>.
1207      */
1208     altText: '',
1209
1210     // doc'd in BaseItem
1211     hideDelay: 200,
1212
1213     // private
1214     ctype: 'Ext.menu.Item',
1215
1216     initComponent : function(){
1217         Ext.menu.Item.superclass.initComponent.call(this);
1218         if(this.menu){
1219             this.menu = Ext.menu.MenuMgr.get(this.menu);
1220             this.menu.ownerCt = this;
1221         }
1222     },
1223
1224     // private
1225     onRender : function(container, position){
1226         if (!this.itemTpl) {
1227             this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
1228                 '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
1229                     '<tpl if="hrefTarget">',
1230                         ' target="{hrefTarget}"',
1231                     '</tpl>',
1232                  '>',
1233                      '<img alt="{altText}" src="{icon}" class="x-menu-item-icon {iconCls}"/>',
1234                      '<span class="x-menu-item-text">{text}</span>',
1235                  '</a>'
1236              );
1237         }
1238         var a = this.getTemplateArgs();
1239         this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
1240         this.iconEl = this.el.child('img.x-menu-item-icon');
1241         this.textEl = this.el.child('.x-menu-item-text');
1242         if(!this.href) { // if no link defined, prevent the default anchor event
1243             this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
1244         }
1245         Ext.menu.Item.superclass.onRender.call(this, container, position);
1246     },
1247
1248     getTemplateArgs: function() {
1249         return {
1250             id: this.id,
1251             cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
1252             href: this.href || '#',
1253             hrefTarget: this.hrefTarget,
1254             icon: this.icon || Ext.BLANK_IMAGE_URL,
1255             iconCls: this.iconCls || '',
1256             text: this.itemText||this.text||'&#160;',
1257             altText: this.altText || ''
1258         };
1259     },
1260
1261     /**
1262      * Sets the text to display in this menu item
1263      * @param {String} text The text to display
1264      */
1265     setText : function(text){
1266         this.text = text||'&#160;';
1267         if(this.rendered){
1268             this.textEl.update(this.text);
1269             this.parentMenu.layout.doAutoSize();
1270         }
1271     },
1272
1273     /**
1274      * Sets the CSS class to apply to the item's icon element
1275      * @param {String} cls The CSS class to apply
1276      */
1277     setIconClass : function(cls){
1278         var oldCls = this.iconCls;
1279         this.iconCls = cls;
1280         if(this.rendered){
1281             this.iconEl.replaceClass(oldCls, this.iconCls);
1282         }
1283     },
1284
1285     //private
1286     beforeDestroy: function(){
1287         if (this.menu){
1288             delete this.menu.ownerCt;
1289             this.menu.destroy();
1290         }
1291         Ext.menu.Item.superclass.beforeDestroy.call(this);
1292     },
1293
1294     // private
1295     handleClick : function(e){
1296         if(!this.href){ // if no link defined, stop the event automatically
1297             e.stopEvent();
1298         }
1299         Ext.menu.Item.superclass.handleClick.apply(this, arguments);
1300     },
1301
1302     // private
1303     activate : function(autoExpand){
1304         if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
1305             this.focus();
1306             if(autoExpand){
1307                 this.expandMenu();
1308             }
1309         }
1310         return true;
1311     },
1312
1313     // private
1314     shouldDeactivate : function(e){
1315         if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
1316             if(this.menu && this.menu.isVisible()){
1317                 return !this.menu.getEl().getRegion().contains(e.getPoint());
1318             }
1319             return true;
1320         }
1321         return false;
1322     },
1323
1324     // private
1325     deactivate : function(){
1326         Ext.menu.Item.superclass.deactivate.apply(this, arguments);
1327         this.hideMenu();
1328     },
1329
1330     // private
1331     expandMenu : function(autoActivate){
1332         if(!this.disabled && this.menu){
1333             clearTimeout(this.hideTimer);
1334             delete this.hideTimer;
1335             if(!this.menu.isVisible() && !this.showTimer){
1336                 this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
1337             }else if (this.menu.isVisible() && autoActivate){
1338                 this.menu.tryActivate(0, 1);
1339             }
1340         }
1341     },
1342
1343     // private
1344     deferExpand : function(autoActivate){
1345         delete this.showTimer;
1346         this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
1347         if(autoActivate){
1348             this.menu.tryActivate(0, 1);
1349         }
1350     },
1351
1352     // private
1353     hideMenu : function(){
1354         clearTimeout(this.showTimer);
1355         delete this.showTimer;
1356         if(!this.hideTimer && this.menu && this.menu.isVisible()){
1357             this.hideTimer = this.deferHide.defer(this.hideDelay, this);
1358         }
1359     },
1360
1361     // private
1362     deferHide : function(){
1363         delete this.hideTimer;
1364         if(this.menu.over){
1365             this.parentMenu.setActiveItem(this, false);
1366         }else{
1367             this.menu.hide();
1368         }
1369     }
1370 });
1371 Ext.reg('menuitem', Ext.menu.Item);/**
1372  * @class Ext.menu.CheckItem
1373  * @extends Ext.menu.Item
1374  * Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
1375  * @constructor
1376  * Creates a new CheckItem
1377  * @param {Object} config Configuration options
1378  * @xtype menucheckitem
1379  */
1380 Ext.menu.CheckItem = Ext.extend(Ext.menu.Item, {
1381     /**
1382      * @cfg {String} group
1383      * All check items with the same group name will automatically be grouped into a single-select
1384      * radio button group (defaults to '')
1385      */
1386     /**
1387      * @cfg {String} itemCls The default CSS class to use for check items (defaults to "x-menu-item x-menu-check-item")
1388      */
1389     itemCls : "x-menu-item x-menu-check-item",
1390     /**
1391      * @cfg {String} groupClass The default CSS class to use for radio group check items (defaults to "x-menu-group-item")
1392      */
1393     groupClass : "x-menu-group-item",
1394
1395     /**
1396      * @cfg {Boolean} checked True to initialize this checkbox as checked (defaults to false).  Note that
1397      * if this checkbox is part of a radio group (group = true) only the first item in the group that is
1398      * initialized with checked = true will be rendered as checked.
1399      */
1400     checked: false,
1401
1402     // private
1403     ctype: "Ext.menu.CheckItem",
1404
1405     initComponent : function(){
1406         Ext.menu.CheckItem.superclass.initComponent.call(this);
1407             this.addEvents(
1408                 /**
1409                  * @event beforecheckchange
1410                  * Fires before the checked value is set, providing an opportunity to cancel if needed
1411                  * @param {Ext.menu.CheckItem} this
1412                  * @param {Boolean} checked The new checked value that will be set
1413                  */
1414                 "beforecheckchange" ,
1415                 /**
1416                  * @event checkchange
1417                  * Fires after the checked value has been set
1418                  * @param {Ext.menu.CheckItem} this
1419                  * @param {Boolean} checked The checked value that was set
1420                  */
1421                 "checkchange"
1422             );
1423             /**
1424              * A function that handles the checkchange event.  The function is undefined by default, but if an implementation
1425              * is provided, it will be called automatically when the checkchange event fires.
1426              * @param {Ext.menu.CheckItem} this
1427              * @param {Boolean} checked The checked value that was set
1428              * @method checkHandler
1429              */
1430             if(this.checkHandler){
1431                 this.on('checkchange', this.checkHandler, this.scope);
1432             }
1433             Ext.menu.MenuMgr.registerCheckable(this);
1434     },
1435
1436     // private
1437     onRender : function(c){
1438         Ext.menu.CheckItem.superclass.onRender.apply(this, arguments);
1439         if(this.group){
1440             this.el.addClass(this.groupClass);
1441         }
1442         if(this.checked){
1443             this.checked = false;
1444             this.setChecked(true, true);
1445         }
1446     },
1447
1448     // private
1449     destroy : function(){
1450         Ext.menu.MenuMgr.unregisterCheckable(this);
1451         Ext.menu.CheckItem.superclass.destroy.apply(this, arguments);
1452     },
1453
1454     /**
1455      * Set the checked state of this item
1456      * @param {Boolean} checked The new checked value
1457      * @param {Boolean} suppressEvent (optional) True to prevent the checkchange event from firing (defaults to false)
1458      */
1459     setChecked : function(state, suppressEvent){
1460         var suppress = suppressEvent === true;
1461         if(this.checked != state && (suppress || this.fireEvent("beforecheckchange", this, state) !== false)){
1462             Ext.menu.MenuMgr.onCheckChange(this, state);
1463             if(this.container){
1464                 this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
1465             }
1466             this.checked = state;
1467             if(!suppress){
1468                 this.fireEvent("checkchange", this, state);
1469             }
1470         }
1471     },
1472
1473     // private
1474     handleClick : function(e){
1475        if(!this.disabled && !(this.checked && this.group)){// disable unselect on radio item
1476            this.setChecked(!this.checked);
1477        }
1478        Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
1479     }
1480 });
1481 Ext.reg('menucheckitem', Ext.menu.CheckItem);/**
1482  * @class Ext.menu.DateMenu
1483  * @extends Ext.menu.Menu
1484  * <p>A menu containing an {@link Ext.DatePicker} Component.</p>
1485  * <p>Notes:</p><div class="mdetail-params"><ul>
1486  * <li>Although not listed here, the <b>constructor</b> for this class
1487  * accepts all of the configuration options of <b>{@link Ext.DatePicker}</b>.</li>
1488  * <li>If subclassing DateMenu, any configuration options for the DatePicker must be
1489  * applied to the <tt><b>initialConfig</b></tt> property of the DateMenu.
1490  * Applying {@link Ext.DatePicker DatePicker} configuration settings to
1491  * <b><tt>this</tt></b> will <b>not</b> affect the DatePicker's configuration.</li>
1492  * </ul></div>
1493  * @xtype datemenu
1494  */
1495  Ext.menu.DateMenu = Ext.extend(Ext.menu.Menu, {
1496     /**
1497      * @cfg {Boolean} enableScrolling
1498      * @hide
1499      */
1500     enableScrolling : false,
1501     /**
1502      * @cfg {Function} handler
1503      * Optional. A function that will handle the select event of this menu.
1504      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
1505      * <li><code>picker</code> : DatePicker<div class="sub-desc">The Ext.DatePicker.</div></li>
1506      * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li>
1507      * </ul></div>
1508      */
1509     /**
1510      * @cfg {Object} scope
1511      * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
1512      * function will be called.  Defaults to this DateMenu instance.
1513      */
1514     /**
1515      * @cfg {Boolean} hideOnClick
1516      * False to continue showing the menu after a date is selected, defaults to true.
1517      */
1518     hideOnClick : true,
1519
1520     /**
1521      * @cfg {String} pickerId
1522      * An id to assign to the underlying date picker. Defaults to <tt>null</tt>.
1523      */
1524     pickerId : null,
1525
1526     /**
1527      * @cfg {Number} maxHeight
1528      * @hide
1529      */
1530     /**
1531      * @cfg {Number} scrollIncrement
1532      * @hide
1533      */
1534     /**
1535      * The {@link Ext.DatePicker} instance for this DateMenu
1536      * @property picker
1537      * @type DatePicker
1538      */
1539     cls : 'x-date-menu',
1540
1541     /**
1542      * @event click
1543      * @hide
1544      */
1545
1546     /**
1547      * @event itemclick
1548      * @hide
1549      */
1550
1551     initComponent : function(){
1552         this.on('beforeshow', this.onBeforeShow, this);
1553         if(this.strict = (Ext.isIE7 && Ext.isStrict)){
1554             this.on('show', this.onShow, this, {single: true, delay: 20});
1555         }
1556         Ext.apply(this, {
1557             plain: true,
1558             showSeparator: false,
1559             items: this.picker = new Ext.DatePicker(Ext.applyIf({
1560                 internalRender: this.strict || !Ext.isIE,
1561                 ctCls: 'x-menu-date-item',
1562                 id: this.pickerId
1563             }, this.initialConfig))
1564         });
1565         this.picker.purgeListeners();
1566         Ext.menu.DateMenu.superclass.initComponent.call(this);
1567         /**
1568          * @event select
1569          * Fires when a date is selected from the {@link #picker Ext.DatePicker}
1570          * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
1571          * @param {Date} date The selected date
1572          */
1573         this.relayEvents(this.picker, ['select']);
1574         this.on('show', this.picker.focus, this.picker);
1575         this.on('select', this.menuHide, this);
1576         if(this.handler){
1577             this.on('select', this.handler, this.scope || this);
1578         }
1579     },
1580
1581     menuHide : function() {
1582         if(this.hideOnClick){
1583             this.hide(true);
1584         }
1585     },
1586
1587     onBeforeShow : function(){
1588         if(this.picker){
1589             this.picker.hideMonthPicker(true);
1590         }
1591     },
1592
1593     onShow : function(){
1594         var el = this.picker.getEl();
1595         el.setWidth(el.getWidth()); //nasty hack for IE7 strict mode
1596     }
1597  });
1598  Ext.reg('datemenu', Ext.menu.DateMenu);
1599  /**
1600  * @class Ext.menu.ColorMenu
1601  * @extends Ext.menu.Menu
1602  * <p>A menu containing a {@link Ext.ColorPalette} Component.</p>
1603  * <p>Notes:</p><div class="mdetail-params"><ul>
1604  * <li>Although not listed here, the <b>constructor</b> for this class
1605  * accepts all of the configuration options of <b>{@link Ext.ColorPalette}</b>.</li>
1606  * <li>If subclassing ColorMenu, any configuration options for the ColorPalette must be
1607  * applied to the <tt><b>initialConfig</b></tt> property of the ColorMenu.
1608  * Applying {@link Ext.ColorPalette ColorPalette} configuration settings to
1609  * <b><tt>this</tt></b> will <b>not</b> affect the ColorPalette's configuration.</li>
1610  * </ul></div> *
1611  * @xtype colormenu
1612  */
1613  Ext.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {
1614     /**
1615      * @cfg {Boolean} enableScrolling
1616      * @hide
1617      */
1618     enableScrolling : false,
1619     /**
1620      * @cfg {Function} handler
1621      * Optional. A function that will handle the select event of this menu.
1622      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
1623      * <li><code>palette</code> : ColorPalette<div class="sub-desc">The {@link #palette Ext.ColorPalette}.</div></li>
1624      * <li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li>
1625      * </ul></div>
1626      */
1627     /**
1628      * @cfg {Object} scope
1629      * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
1630      * function will be called.  Defaults to this ColorMenu instance.
1631      */
1632
1633     /**
1634      * @cfg {Boolean} hideOnClick
1635      * False to continue showing the menu after a color is selected, defaults to true.
1636      */
1637     hideOnClick : true,
1638
1639     cls : 'x-color-menu',
1640
1641     /**
1642      * @cfg {String} paletteId
1643      * An id to assign to the underlying color palette. Defaults to <tt>null</tt>.
1644      */
1645     paletteId : null,
1646
1647     /**
1648      * @cfg {Number} maxHeight
1649      * @hide
1650      */
1651     /**
1652      * @cfg {Number} scrollIncrement
1653      * @hide
1654      */
1655     /**
1656      * @property palette
1657      * @type ColorPalette
1658      * The {@link Ext.ColorPalette} instance for this ColorMenu
1659      */
1660
1661
1662     /**
1663      * @event click
1664      * @hide
1665      */
1666
1667     /**
1668      * @event itemclick
1669      * @hide
1670      */
1671
1672     initComponent : function(){
1673         Ext.apply(this, {
1674             plain: true,
1675             showSeparator: false,
1676             items: this.palette = new Ext.ColorPalette(Ext.applyIf({
1677                 id: this.paletteId
1678             }, this.initialConfig))
1679         });
1680         this.palette.purgeListeners();
1681         Ext.menu.ColorMenu.superclass.initComponent.call(this);
1682         /**
1683          * @event select
1684          * Fires when a color is selected from the {@link #palette Ext.ColorPalette}
1685          * @param {Ext.ColorPalette} palette The {@link #palette Ext.ColorPalette}
1686              * @param {String} color The 6-digit color hex code (without the # symbol)
1687          */
1688         this.relayEvents(this.palette, ['select']);
1689         this.on('select', this.menuHide, this);
1690         if(this.handler){
1691             this.on('select', this.handler, this.scope || this);
1692         }
1693     },
1694
1695     menuHide : function(){
1696         if(this.hideOnClick){
1697             this.hide(true);
1698         }
1699     }
1700 });
1701 Ext.reg('colormenu', Ext.menu.ColorMenu);