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  * A menu containing a Ext.picker.Color Component.
  17  *
  18  * Notes:
  19  *
  20  *   - Although not listed here, the **constructor** for this class accepts all of the
  21  *     configuration options of {@link Ext.picker.Color}.
  22  *   - If subclassing ColorMenu, any configuration options for the ColorPicker must be
  23  *     applied to the **initialConfig** property of the ColorMenu. Applying
  24  *     {@link Ext.picker.Color ColorPicker} configuration settings to `this` will **not**
  25  *     affect the ColorPicker's configuration.
  26  *
  27  * Example:
  28  *
  29  *     @example
  30  *     var colorPicker = Ext.create('Ext.menu.ColorPicker', {
  31  *         value: '000000'
  32  *     });
  33  *
  34  *     Ext.create('Ext.menu.Menu', {
  35  *         width: 100,
  36  *         height: 90,
  37  *         floating: false,  // usually you want this set to True (default)
  38  *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
  39  *         items: [{
  40  *             text: 'choose a color',
  41  *             menu: colorPicker
  42  *         },{
  43  *             iconCls: 'add16',
  44  *             text: 'icon item'
  45  *         },{
  46  *             text: 'regular item'
  47  *         }]
  48  *     });
  49  */
  50  Ext.define('Ext.menu.ColorPicker', {
  51      extend: 'Ext.menu.Menu',
  52
  53      alias: 'widget.colormenu',
  54
  55      requires: [
  56         'Ext.picker.Color'
  57      ],
  58
  59     /**
  60      * @cfg {Boolean} hideOnClick
  61      * False to continue showing the menu after a date is selected.
  62      */
  63     hideOnClick : true,
  64
  65     /**
  66      * @cfg {String} pickerId
  67      * An id to assign to the underlying color picker.
  68      */
  69     pickerId : null,
  70
  71     /**
  72      * @cfg {Number} maxHeight
  73      * @hide
  74      */
  75
  76     /**
  77      * @property {Ext.picker.Color} picker
  78      * The {@link Ext.picker.Color} instance for this ColorMenu
  79      */
  80
  81     /**
  82      * @event click
  83      * @hide
  84      */
  85
  86     /**
  87      * @event itemclick
  88      * @hide
  89      */
  90
  91     initComponent : function(){
  92         var me = this,
  93             cfg = Ext.apply({}, me.initialConfig);
  94
  95         // Ensure we don't get duplicate listeners
  96         delete cfg.listeners;
  97         Ext.apply(me, {
  98             plain: true,
  99             showSeparator: false,
 100             items: Ext.applyIf({
 101                 cls: Ext.baseCSSPrefix + 'menu-color-item',
 102                 id: me.pickerId,
 103                 xtype: 'colorpicker'
 104             }, cfg)
 105         });
 106
 107         me.callParent(arguments);
 108
 109         me.picker = me.down('colorpicker');
 110
 111         /**
 112          * @event select
 113          * @alias Ext.picker.Color#select
 114          */
 115         me.relayEvents(me.picker, ['select']);
 116
 117         if (me.hideOnClick) {
 118             me.on('select', me.hidePickerOnSelect, me);
 119         }
 120     },
 121
 122     /**
 123      * Hides picker on select if hideOnClick is true
 124      * @private
 125      */
 126     hidePickerOnSelect: function() {
 127         Ext.menu.Manager.hideAll();
 128     }
 129  });