pkgs/pkg-menu-debug.js

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