docs/source/ColorPicker.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-menu-ColorPicker'>/**
  19 </span> * @class Ext.menu.ColorPicker
  20  * @extends Ext.menu.Menu
  21  * &lt;p&gt;A menu containing a {@link Ext.picker.Color} Component.&lt;/p&gt;
  22  * &lt;p&gt;Notes:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  23  * &lt;li&gt;Although not listed here, the &lt;b&gt;constructor&lt;/b&gt; for this class
  24  * accepts all of the configuration options of &lt;b&gt;{@link Ext.picker.Color}&lt;/b&gt;.&lt;/li&gt;
  25  * &lt;li&gt;If subclassing ColorMenu, any configuration options for the ColorPicker must be
  26  * applied to the &lt;tt&gt;&lt;b&gt;initialConfig&lt;/b&gt;&lt;/tt&gt; property of the ColorMenu.
  27  * Applying {@link Ext.picker.Color ColorPicker} configuration settings to
  28  * &lt;b&gt;&lt;tt&gt;this&lt;/tt&gt;&lt;/b&gt; will &lt;b&gt;not&lt;/b&gt; affect the ColorPicker's configuration.&lt;/li&gt;
  29  * &lt;/ul&gt;&lt;/div&gt;
  30  *
  31  * {@img Ext.menu.ColorPicker/Ext.menu.ColorPicker.png Ext.menu.ColorPicker component}
  32  *
  33  * __Example Usage__
  34  *
  35  *     var colorPicker = Ext.create('Ext.menu.ColorPicker', {
  36  *         value: '000000'
  37  *     });
  38  *
  39  *     Ext.create('Ext.menu.Menu', {
  40  *         width: 100,
  41  *         height: 90,
  42  *         floating: false,  // usually you want this set to True (default)
  43  *         renderTo: Ext.getBody(),  // usually rendered by it's containing component
  44  *         items: [{
  45  *             text: 'choose a color',
  46  *             menu: colorPicker
  47  *         },{
  48  *             iconCls: 'add16',
  49  *             text: 'icon item'
  50  *         },{
  51  *             text: 'regular item'
  52  *         }]
  53  *     });
  54  *
  55  * @author Nicolas Ferrero
  56  */
  57  Ext.define('Ext.menu.ColorPicker', {
  58      extend: 'Ext.menu.Menu',
  59
  60      alias: 'widget.colormenu',
  61
  62      requires: [
  63         'Ext.picker.Color'
  64      ],
  65
  66 <span id='Ext-menu-ColorPicker-cfg-hideOnClick'>    /**
  67 </span>     * @cfg {Boolean} hideOnClick
  68      * False to continue showing the menu after a date is selected, defaults to true.
  69      */
  70     hideOnClick : true,
  71
  72 <span id='Ext-menu-ColorPicker-cfg-pickerId'>    /**
  73 </span>     * @cfg {String} pickerId
  74      * An id to assign to the underlying color picker. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  75      */
  76     pickerId : null,
  77
  78 <span id='Ext-menu-ColorPicker-cfg-maxHeight'>    /**
  79 </span>     * @cfg {Number} maxHeight
  80      * @hide
  81      */
  82
  83 <span id='Ext-menu-ColorPicker-property-picker'>    /**
  84 </span>     * The {@link Ext.picker.Color} instance for this ColorMenu
  85      * @property picker
  86      * @type ColorPicker
  87      */
  88
  89 <span id='Ext-menu-ColorPicker-event-click'>    /**
  90 </span>     * @event click
  91      * @hide
  92      */
  93
  94 <span id='Ext-menu-ColorPicker-event-itemclick'>    /**
  95 </span>     * @event itemclick
  96      * @hide
  97      */
  98
  99     initComponent : function(){
 100         var me = this;
 101
 102         Ext.apply(me, {
 103             plain: true,
 104             showSeparator: false,
 105             items: Ext.applyIf({
 106                 cls: Ext.baseCSSPrefix + 'menu-color-item',
 107                 id: me.pickerId,
 108                 xtype: 'colorpicker'
 109             }, me.initialConfig)
 110         });
 111
 112         me.callParent(arguments);
 113
 114         me.picker = me.down('colorpicker');
 115
 116 <span id='Ext-menu-ColorPicker-event-select'>        /**
 117 </span>         * @event select
 118          * Fires when a date is selected from the {@link #picker Ext.picker.Color}
 119          * @param {Ext.picker.Color} picker The {@link #picker Ext.picker.Color}
 120          * @param {String} color The 6-digit color hex code (without the # symbol)
 121          */
 122         me.relayEvents(me.picker, ['select']);
 123
 124         if (me.hideOnClick) {
 125             me.on('select', me.hidePickerOnSelect, me);
 126         }
 127     },
 128
 129 <span id='Ext-menu-ColorPicker-method-hidePickerOnSelect'>    /**
 130 </span>     * Hides picker on select if hideOnClick is true
 131      * @private
 132      */
 133     hidePickerOnSelect: function() {
 134         Ext.menu.Manager.hideAll();
 135     }
 136  });</pre>
 137 </body>
 138 </html>