src/menu/ColorPicker.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.menu.ColorPicker
  17  * @extends Ext.menu.Menu
  18  * <p>A menu containing a {@link Ext.picker.Color} Component.</p>
  19  * <p>Notes:</p><div class="mdetail-params"><ul>
  20  * <li>Although not listed here, the <b>constructor</b> for this class
  21  * accepts all of the configuration options of <b>{@link Ext.picker.Color}</b>.</li>
  22  * <li>If subclassing ColorMenu, any configuration options for the ColorPicker must be
  23  * applied to the <tt><b>initialConfig</b></tt> property of the ColorMenu.
  24  * Applying {@link Ext.picker.Color ColorPicker} configuration settings to
  25  * <b><tt>this</tt></b> will <b>not</b> affect the ColorPicker's configuration.</li>
  26  * </ul></div>
  27  *
  28  * {@img Ext.menu.ColorPicker/Ext.menu.ColorPicker.png Ext.menu.ColorPicker component}
  29  *
  30  * __Example Usage__
  31  *
  32  *     var colorPicker = Ext.create('Ext.menu.ColorPicker', {
  33  *         value: '000000'
  34  *     });
  35  *
  36  *     Ext.create('Ext.menu.Menu', {
  37  *         width: 100,
  38  *         height: 90,
  39  *         floating: false,  // usually you want this set to True (default)
  40  *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
  41  *         items: [{
  42  *             text: 'choose a color',
  43  *             menu: colorPicker
  44  *         },{
  45  *             iconCls: 'add16',
  46  *             text: 'icon item'
  47  *         },{
  48  *             text: 'regular item'
  49  *         }]
  50  *     });
  51  *
  52  * @author Nicolas Ferrero
  53  */
  54  Ext.define('Ext.menu.ColorPicker', {
  55      extend: 'Ext.menu.Menu',
  56
  57      alias: 'widget.colormenu',
  58
  59      requires: [
  60         'Ext.picker.Color'
  61      ],
  62
  63     /**
  64      * @cfg {Boolean} hideOnClick
  65      * False to continue showing the menu after a date is selected, defaults to true.
  66      */
  67     hideOnClick : true,
  68
  69     /**
  70      * @cfg {String} pickerId
  71      * An id to assign to the underlying color picker. Defaults to <tt>null</tt>.
  72      */
  73     pickerId : null,
  74
  75     /**
  76      * @cfg {Number} maxHeight
  77      * @hide
  78      */
  79
  80     /**
  81      * The {@link Ext.picker.Color} instance for this ColorMenu
  82      * @property picker
  83      * @type ColorPicker
  84      */
  85
  86     /**
  87      * @event click
  88      * @hide
  89      */
  90
  91     /**
  92      * @event itemclick
  93      * @hide
  94      */
  95
  96     initComponent : function(){
  97         var me = this;
  98
  99         Ext.apply(me, {
 100             plain: true,
 101             showSeparator: false,
 102             items: Ext.applyIf({
 103                 cls: Ext.baseCSSPrefix + 'menu-color-item',
 104                 id: me.pickerId,
 105                 xtype: 'colorpicker'
 106             }, me.initialConfig)
 107         });
 108
 109         me.callParent(arguments);
 110
 111         me.picker = me.down('colorpicker');
 112
 113         /**
 114          * @event select
 115          * Fires when a date is selected from the {@link #picker Ext.picker.Color}
 116          * @param {Ext.picker.Color} picker The {@link #picker Ext.picker.Color}
 117          * @param {String} color The 6-digit color hex code (without the # symbol)
 118          */
 119         me.relayEvents(me.picker, ['select']);
 120
 121         if (me.hideOnClick) {
 122             me.on('select', me.hidePickerOnSelect, me);
 123         }
 124     },
 125
 126     /**
 127      * Hides picker on select if hideOnClick is true
 128      * @private
 129      */
 130     hidePickerOnSelect: function() {
 131         Ext.menu.Manager.hideAll();
 132     }
 133  });