3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The
17 * available default to a standard 40-color palette; this can be customized with the {@link #colors} config.
19 * Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;
20 * you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
23 * Ext.create('Ext.picker.Color', {
24 * value: '993300', // initial selected color
25 * renderTo: Ext.getBody(),
27 * select: function(picker, selColor) {
33 Ext.define('Ext.picker.Color', {
34 extend: 'Ext.Component',
35 requires: 'Ext.XTemplate',
36 alias: 'widget.colorpicker',
37 alternateClassName: 'Ext.ColorPalette',
40 * @cfg {String} [componentCls='x-color-picker']
41 * The CSS class to apply to the containing element.
43 componentCls : Ext.baseCSSPrefix + 'color-picker',
46 * @cfg {String} [selectedCls='x-color-picker-selected']
47 * The CSS class to apply to the selected element
49 selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
53 * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex
54 * codes are case-sensitive.
59 * @cfg {String} clickEvent
60 * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
65 * @cfg {Boolean} allowReselect
66 * If set to true then reselecting a color that is already selected fires the {@link #select} event
68 allowReselect : false,
71 * @property {String[]} colors
72 * An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,
73 * and each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property
74 * of the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the
75 * width setting until the box is symmetrical.
77 * You can override individual colors if needed:
79 * var cp = new Ext.picker.Color();
80 * cp.colors[0] = 'FF0000'; // change the first box to red
82 * Or you can provide a custom array of your own for complete control:
84 * var cp = new Ext.picker.Color();
85 * cp.colors = ['000000', '993300', '333300'];
88 '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
89 '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
90 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
91 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
92 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
96 * @cfg {Function} handler
97 * A function that will handle the select event of this picker. The handler is passed the following parameters:
99 * - `picker` : ColorPicker
101 * The {@link Ext.picker.Color picker}.
105 * The 6-digit color hex code (without the # symbol).
109 * @cfg {Object} scope
110 * The scope (`this` reference) in which the `{@link #handler}` function will be called. Defaults to this
111 * Color picker instance.
114 colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
117 '<tpl for="colors">',
118 '<a href="#" class="color-{.}" hidefocus="on">',
119 '<em><span style="background:#{.}" unselectable="on"> </span></em>',
125 initComponent : function(){
128 me.callParent(arguments);
132 * Fires when a color is selected
133 * @param {Ext.picker.Color} this
134 * @param {String} color The 6-digit color hex code (without the # symbol)
140 me.on('select', me.handler, me.scope, true);
146 onRender : function(container, position){
148 clickEvent = me.clickEvent;
150 Ext.apply(me.renderData, {
154 me.callParent(arguments);
156 me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
157 // always stop following the anchors
158 if(clickEvent != 'click'){
159 me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});
164 afterRender : function(){
168 me.callParent(arguments);
172 me.select(value, true);
177 handleClick : function(event, target){
183 color = target.className.match(me.colorRe)[1];
184 me.select(color.toUpperCase());
189 * Selects the specified color in the picker (fires the {@link #select} event)
190 * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
191 * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to false.
193 select : function(color, suppressEvent){
196 selectedCls = me.selectedCls,
200 color = color.replace('#', '');
207 if (color != value || me.allowReselect) {
211 el.down('a.color-' + value).removeCls(selectedCls);
213 el.down('a.color-' + color).addCls(selectedCls);
215 if (suppressEvent !== true) {
216 me.fireEvent('select', me, color);
222 * Get the currently selected color value.
223 * @return {String} value The selected value. Null if nothing is selected.
225 getValue: function(){
226 return this.value || null;