src/widgets/menu/ColorMenu.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.ColorMenu
   9  * @extends Ext.menu.Menu
  10  * <p>A menu containing a {@link Ext.ColorPalette} Component.</p>
  11  * <p>Notes:</p><div class="mdetail-params"><ul>
  12  * <li>Although not listed here, the <b>constructor</b> for this class
  13  * accepts all of the configuration options of <b>{@link Ext.ColorPalette}</b>.</li>
  14  * <li>If subclassing ColorMenu, any configuration options for the ColorPalette must be
  15  * applied to the <tt><b>initialConfig</b></tt> property of the ColorMenu.
  16  * Applying {@link Ext.ColorPalette ColorPalette} configuration settings to
  17  * <b><tt>this</tt></b> will <b>not</b> affect the ColorPalette's configuration.</li>
  18  * </ul></div> *
  19  * @xtype colormenu
  20  */
  21  Ext.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {
  22     /**
  23      * @cfg {Boolean} enableScrolling
  24      * @hide
  25      */
  26     enableScrolling : false,
  27     /**
  28      * @cfg {Function} handler
  29      * Optional. A function that will handle the select event of this menu.
  30      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
  31      * <li><code>palette</code> : ColorPalette<div class="sub-desc">The {@link #palette Ext.ColorPalette}.</div></li>
  32      * <li><code>color</code> : String<div class="sub-desc">The 6-digit color hex code (without the # symbol).</div></li>
  33      * </ul></div>
  34      */
  35     /**
  36      * @cfg {Object} scope
  37      * The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
  38      * function will be called.  Defaults to this ColorMenu instance.
  39      */
  40
  41     /**
  42      * @cfg {Boolean} hideOnClick
  43      * False to continue showing the menu after a color is selected, defaults to true.
  44      */
  45     hideOnClick : true,
  46
  47     cls : 'x-color-menu',
  48
  49     /**
  50      * @cfg {String} paletteId
  51      * An id to assign to the underlying color palette. Defaults to <tt>null</tt>.
  52      */
  53     paletteId : null,
  54
  55     /**
  56      * @cfg {Number} maxHeight
  57      * @hide
  58      */
  59     /**
  60      * @cfg {Number} scrollIncrement
  61      * @hide
  62      */
  63     /**
  64      * @property palette
  65      * @type ColorPalette
  66      * The {@link Ext.ColorPalette} instance for this ColorMenu
  67      */
  68
  69
  70     /**
  71      * @event click
  72      * @hide
  73      */
  74
  75     /**
  76      * @event itemclick
  77      * @hide
  78      */
  79
  80     initComponent : function(){
  81         Ext.apply(this, {
  82             plain: true,
  83             showSeparator: false,
  84             items: this.palette = new Ext.ColorPalette(Ext.applyIf({
  85                 id: this.paletteId
  86             }, this.initialConfig))
  87         });
  88         this.palette.purgeListeners();
  89         Ext.menu.ColorMenu.superclass.initComponent.call(this);
  90         /**
  91          * @event select
  92          * Fires when a color is selected from the {@link #palette Ext.ColorPalette}
  93          * @param {Ext.ColorPalette} palette The {@link #palette Ext.ColorPalette}
  94              * @param {String} color The 6-digit color hex code (without the # symbol)
  95          */
  96         this.relayEvents(this.palette, ['select']);
  97         this.on('select', this.menuHide, this);
  98         if(this.handler){
  99             this.on('select', this.handler, this.scope || this);
 100         }
 101     },
 102
 103     menuHide : function(){
 104         if(this.hideOnClick){
 105             this.hide(true);
 106         }
 107     }
 108 });
 109 Ext.reg('colormenu', Ext.menu.ColorMenu);