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  * {@img Ext.menu.ColorPicker/Ext.menu.ColorPicker.png Ext.menu.ColorPicker component}
  31  * __Example Usage__
  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  * @xtype colormenu
  53  * @author Nicolas Ferrero
  54  */
  55  Ext.define('Ext.menu.ColorPicker', {
  56      extend: 'Ext.menu.Menu',
  57
  58      alias: 'widget.colormenu',
  59
  60      requires: [
  61         'Ext.picker.Color'
  62      ],
  63
  64 <span id='Ext-menu-ColorPicker-cfg-hideOnClick'>    /**
  65 </span>     * @cfg {Boolean} hideOnClick
  66      * False to continue showing the menu after a date is selected, defaults to true.
  67      */
  68     hideOnClick : true,
  69
  70 <span id='Ext-menu-ColorPicker-cfg-pickerId'>    /**
  71 </span>     * @cfg {String} pickerId
  72      * An id to assign to the underlying color picker. Defaults to &lt;tt&gt;null&lt;/tt&gt;.
  73      */
  74     pickerId : null,
  75
  76 <span id='Ext-menu-ColorPicker-cfg-maxHeight'>    /**
  77 </span>     * @cfg {Number} maxHeight
  78      * @hide
  79      */
  80
  81 <span id='Ext-menu-ColorPicker-property-picker'>    /**
  82 </span>     * The {@link Ext.picker.Color} instance for this ColorMenu
  83      * @property picker
  84      * @type ColorPicker
  85      */
  86
  87 <span id='Ext-menu-ColorPicker-event-click'>    /**
  88 </span>     * @event click
  89      * @hide
  90      */
  91
  92 <span id='Ext-menu-ColorPicker-event-itemclick'>    /**
  93 </span>     * @event itemclick
  94      * @hide
  95      */
  96
  97     initComponent : function(){
  98         var me = this;
  99
 100         Ext.apply(me, {
 101             plain: true,
 102             showSeparator: false,
 103             items: Ext.applyIf({
 104                 cls: Ext.baseCSSPrefix + 'menu-color-item',
 105                 id: me.pickerId,
 106                 xtype: 'colorpicker'
 107             }, me.initialConfig)
 108         });
 109
 110         me.callParent(arguments);
 111
 112         me.picker = me.down('colorpicker');
 113
 114 <span id='Ext-menu-ColorPicker-event-select'>        /**
 115 </span>         * @event select
 116          * Fires when a date is selected from the {@link #picker Ext.picker.Color}
 117          * @param {Ext.picker.Color} picker The {@link #picker Ext.picker.Color}
 118          * @param {String} color The 6-digit color hex code (without the # symbol)
 119          */
 120         me.relayEvents(me.picker, ['select']);
 121
 122         if (me.hideOnClick) {
 123             me.on('select', me.hidePickerOnSelect, me);
 124         }
 125     },
 126
 127 <span id='Ext-menu-ColorPicker-method-hidePickerOnSelect'>    /**
 128 </span>     * Hides picker on select if hideOnClick is true
 129      * @private
 130      */
 131     hidePickerOnSelect: function() {
 132         Ext.menu.Manager.hideAll();
 133     }
 134  });</pre>
 135 </body>
 136 </html>