docs/source/Color.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-picker-Color-method-constructor'><span id='Ext-picker-Color'>/**
  19 </span></span> * @class Ext.picker.Color
  20  * @extends Ext.Component
  21  * &lt;p&gt;ColorPicker provides a simple color palette for choosing colors. The picker can be rendered to any container.
  22  * The available default to a standard 40-color palette; this can be customized with the {@link #colors} config.&lt;/p&gt;
  23  * &lt;p&gt;Typically you will need to implement a handler function to be notified when the user chooses a color from the
  24  * picker; you can register the handler using the {@link #select} event, or by implementing the {@link #handler}
  25  * method.&lt;/p&gt;
  26  * &lt;p&gt;Here's an example of typical usage:&lt;/p&gt;
  27  * &lt;pre&gt;&lt;code&gt;var cp = new Ext.picker.Color({
  28     value: '993300',  // initial selected color
  29     renderTo: 'my-div'
  30 });
  31
  32 cp.on('select', function(picker, selColor){
  33     // do something with selColor
  34 });
  35 &lt;/code&gt;&lt;/pre&gt;
  36  * {@img Ext.picker.Color/Ext.picker.Color.png Ext.picker.Color component}
  37  *
  38  * @constructor
  39  * Create a new ColorPicker
  40  * @param {Object} config The config object
  41  *
  42  * @xtype colorpicker
  43  */
  44 Ext.define('Ext.picker.Color', {
  45     extend: 'Ext.Component',
  46     requires: 'Ext.XTemplate',
  47     alias: 'widget.colorpicker',
  48     alternateClassName: 'Ext.ColorPalette',
  49
  50 <span id='Ext-picker-Color-cfg-componentCls'>    /**
  51 </span>     * @cfg {String} componentCls
  52      * The CSS class to apply to the containing element (defaults to 'x-color-picker')
  53      */
  54     componentCls : Ext.baseCSSPrefix + 'color-picker',
  55
  56 <span id='Ext-picker-Color-cfg-selectedCls'>    /**
  57 </span>     * @cfg {String} selectedCls
  58      * The CSS class to apply to the selected element
  59      */
  60     selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
  61
  62 <span id='Ext-picker-Color-cfg-value'>    /**
  63 </span>     * @cfg {String} value
  64      * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
  65      * the hex codes are case-sensitive.
  66      */
  67     value : null,
  68
  69 <span id='Ext-picker-Color-cfg-clickEvent'>    /**
  70 </span>     * @cfg {String} clickEvent
  71      * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
  72      * Defaults to &lt;tt&gt;'click'&lt;/tt&gt;.
  73      */
  74     clickEvent :'click',
  75
  76 <span id='Ext-picker-Color-cfg-allowReselect'>    /**
  77 </span>     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the {@link #select} event
  78      */
  79     allowReselect : false,
  80
  81 <span id='Ext-picker-Color-property-colors'>    /**
  82 </span>     * &lt;p&gt;An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
  83      * of colors, and each hex code should be unique.  The width of the picker is controlled via CSS by adjusting
  84      * the width property of the 'x-color-picker' class (or assigning a custom class), so you can balance the number
  85      * of colors with the width setting until the box is symmetrical.&lt;/p&gt;
  86      * &lt;p&gt;You can override individual colors if needed:&lt;/p&gt;
  87      * &lt;pre&gt;&lt;code&gt;
  88 var cp = new Ext.picker.Color();
  89 cp.colors[0] = 'FF0000';  // change the first box to red
  90 &lt;/code&gt;&lt;/pre&gt;
  91
  92 Or you can provide a custom array of your own for complete control:
  93 &lt;pre&gt;&lt;code&gt;
  94 var cp = new Ext.picker.Color();
  95 cp.colors = ['000000', '993300', '333300'];
  96 &lt;/code&gt;&lt;/pre&gt;
  97      * @type Array
  98      */
  99     colors : [
 100         '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
 101         '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
 102         'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
 103         'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
 104         'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
 105     ],
 106
 107 <span id='Ext-picker-Color-cfg-handler'>    /**
 108 </span>     * @cfg {Function} handler
 109      * Optional. A function that will handle the select event of this picker.
 110      * The handler is passed the following parameters:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 111      * &lt;li&gt;&lt;code&gt;picker&lt;/code&gt; : ColorPicker&lt;div class=&quot;sub-desc&quot;&gt;The {@link #picker Ext.picker.Color}.&lt;/div&gt;&lt;/li&gt;
 112      * &lt;li&gt;&lt;code&gt;color&lt;/code&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The 6-digit color hex code (without the # symbol).&lt;/div&gt;&lt;/li&gt;
 113      * &lt;/ul&gt;&lt;/div&gt;
 114      */
 115 <span id='Ext-picker-Color-cfg-scope'>    /**
 116 </span>     * @cfg {Object} scope
 117      * The scope (&lt;tt&gt;&lt;b&gt;this&lt;/b&gt;&lt;/tt&gt; reference) in which the &lt;code&gt;{@link #handler}&lt;/code&gt;
 118      * function will be called.  Defaults to this ColorPicker instance.
 119      */
 120
 121     colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
 122
 123     constructor: function() {
 124         this.renderTpl = Ext.create('Ext.XTemplate', '&lt;tpl for=&quot;colors&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;color-{.}&quot; hidefocus=&quot;on&quot;&gt;&lt;em&gt;&lt;span style=&quot;background:#{.}&quot; unselectable=&quot;on&quot;&gt;&amp;#160;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/tpl&gt;');
 125         this.callParent(arguments);
 126     },
 127
 128     // private
 129     initComponent : function(){
 130         var me = this;
 131
 132         this.callParent(arguments);
 133         me.addEvents(
 134 <span id='Ext-picker-Color-event-select'>            /**
 135 </span>             * @event select
 136              * Fires when a color is selected
 137              * @param {Ext.picker.Color} this
 138              * @param {String} color The 6-digit color hex code (without the # symbol)
 139              */
 140             'select'
 141         );
 142
 143         if (me.handler) {
 144             me.on('select', me.handler, me.scope, true);
 145         }
 146     },
 147
 148
 149     // private
 150     onRender : function(container, position){
 151         var me = this,
 152             clickEvent = me.clickEvent;
 153
 154         Ext.apply(me.renderData, {
 155             itemCls: me.itemCls,
 156             colors: me.colors
 157         });
 158         this.callParent(arguments);
 159
 160         me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
 161         // always stop following the anchors
 162         if(clickEvent != 'click'){
 163             me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});
 164         }
 165     },
 166
 167     // private
 168     afterRender : function(){
 169         var me = this,
 170             value;
 171
 172         this.callParent(arguments);
 173         if (me.value) {
 174             value = me.value;
 175             me.value = null;
 176             me.select(value, true);
 177         }
 178     },
 179
 180     // private
 181     handleClick : function(event, target){
 182         var me = this,
 183             color;
 184
 185         event.stopEvent();
 186         if (!me.disabled) {
 187             color = target.className.match(me.colorRe)[1];
 188             me.select(color.toUpperCase());
 189         }
 190     },
 191
 192 <span id='Ext-picker-Color-method-select'>    /**
 193 </span>     * Selects the specified color in the picker (fires the {@link #select} event)
 194      * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
 195      * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 196      */
 197     select : function(color, suppressEvent){
 198
 199         var me = this,
 200             selectedCls = me.selectedCls,
 201             value = me.value,
 202             el;
 203
 204         color = color.replace('#', '');
 205         if (!me.rendered) {
 206             me.value = color;
 207             return;
 208         }
 209
 210
 211         if (color != value || me.allowReselect) {
 212             el = me.el;
 213
 214             if (me.value) {
 215                 el.down('a.color-' + value).removeCls(selectedCls);
 216             }
 217             el.down('a.color-' + color).addCls(selectedCls);
 218             me.value = color;
 219             if (suppressEvent !== true) {
 220                 me.fireEvent('select', me, color);
 221             }
 222         }
 223     },
 224
 225 <span id='Ext-picker-Color-method-getValue'>    /**
 226 </span>     * Get the currently selected color value.
 227      * @return {String} value The selected value. Null if nothing is selected.
 228      */
 229     getValue: function(){
 230         return this.value || null;
 231     }
 232 });
 233 </pre>
 234 </body>
 235 </html>