PDA

View Full Version : ColorField (color picker form field)



bendy
20 Apr 2007, 2:33 PM
Whipped this thing up for one of my projects and thought I would post the code here in case anyone else finds it useful. It is an Ext.form.ColorField that allows you to choose a color from the menu or enter it manually.

http://i171.photobucket.com/albums/u287/bend2207/colorfield-sample.gif

I followed the DateField as an example when making this. It is not perfect but it works for me. You may have to adjust the image paths depending on where you put things.


/**
* @class Ext.form.ColorField
* @extends Ext.form.TriggerField
* Provides a very simple color form field with a ColorMenu dropdown.
* Values are stored as a six-character hex value without the '#'.
* I.e. 'ffffff'
* @constructor
* Create a new ColorField
* <br />Example:
* <pre><code>
var cf = new Ext.form.ColorField({
fieldLabel: 'Color',
hiddenName:'pref_sales',
showHexValue:true
});
</code></pre>
* @param {Object} config
*/
Ext.form.ColorField = function(config){
Ext.form.ColorField.superclass.constructor.call(this, config);
this.on('render', this.handleRender);
};

Ext.extend(Ext.form.ColorField, Ext.form.TriggerField, {
/**
* @cfg {Boolean} showHexValue
* True to display the HTML Hexidecimal Color Value in the field
* so it is manually editable.
*/
showHexValue : false,

/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
* which displays a calendar icon).
*/
triggerClass : 'x-form-color-trigger',

/**
* @cfg {String/Object} autoCreate
* A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "text", size: "10", autocomplete: "off"})
*/
// private
defaultAutoCreate : {tag: "input", type: "text", size: "10",
autocomplete: "off", maxlength:"6"},

/**
* @cfg {String} lengthText
* A string to be displayed when the length of the input field is
* not 3 or 6, i.e. 'fff' or 'ffccff'.
*/
lengthText: "Color hex values must be either 3 or 6 characters.",

//text to use if blank and allowBlank is false
blankText: "Must have a hexidecimal value in the format ABCDEF.",

/**
* @cfg {String} color
* A string hex value to be used as the default color. Defaults
* to 'FFFFFF' (white).
*/
defaultColor: 'FFFFFF',

maskRe: /[a-f0-9]/i,
// These regexes limit input and validation to hex values
regex: /[a-f0-9]/i,

//private
curColor: 'ffffff',

// private
validateValue : function(value){
if(!this.showHexValue) {
return true;
}
if(value.length<1) {
this.el.setStyle({
'background-color':'#' + this.defaultColor
});
if(!this.allowBlank) {
this.markInvalid(String.format(this.blankText, value));
return false
}
return true;
}
if(value.length!=3 && value.length!=6 ) {
this.markInvalid(String.format(this.lengthText, value));
return false;
}
this.setColor(value);
return true;
},

// private
validateBlur : function(){
return !this.menu || !this.menu.isVisible();
},

// Manually apply the invalid line image since the background
// was previously cleared so the color would show through.
markInvalid : function( msg ) {
Ext.form.ColorField.superclass.markInvalid.call(this, msg);
this.el.setStyle({
'background-image': 'url(../lib/resources/images/default/grid/invalid_line.gif)'
});
},

/**
* Returns the current color value of the color field
* @return {String} value The hexidecimal color value
*/
getValue : function(){
return this.curValue || this.defaultValue || "FFFFFF";
},

/**
* Sets the value of the color field. Format as hex value 'FFFFFF'
* without the '#'.
* @param {String} hex The color value
*/
setValue : function(hex){
Ext.form.ColorField.superclass.setValue.call(this, hex);
this.setColor(hex);
},

/**
* Sets the current color and changes the background.
* Does *not* change the value of the field.
* @param {String} hex The color value.
*/
setColor : function(hex) {
this.curColor = hex;

this.el.setStyle( {
'background-color': '#' + hex,
'background-image': 'none'
});
if(!this.showHexValue) {
this.el.setStyle({
'text-indent': '-100px'
});
if(Ext.isIE) {
this.el.setStyle({
'margin-left': '100px'
});
}
}
},

handleRender: function() {
this.setDefaultColor();
},

setDefaultColor : function() {
this.setValue(this.defaultColor);
},

// private
menuListeners : {
select: function(m, d){
this.setValue(d);
},
show : function(){ // retain focus styling
this.onFocus();
},
hide : function(){
this.focus();
var ml = this.menuListeners;
this.menu.un("select", ml.select, this);
this.menu.un("show", ml.show, this);
this.menu.un("hide", ml.hide, this);
}
},

//private
handleSelect : function(palette, selColor) {
this.setValue(selColor);
},

// private
// Implements the default empty TriggerField.onTriggerClick function to display the ColorPicker
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.ColorMenu();
this.menu.palette.on('select', this.handleSelect, this );
}
this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));
this.menu.show(this.el, "tl-bl?");
}
});

And the CSS:

.x-form-field-wrap .x-form-color-trigger {
background:transparent url(img/color-trigger.gif) no-repeat 0 0;
cursor:pointer;
}

I have attached the icon but it could probably be replaced with something better.

Hope someone finds this useful!

alien3d
20 Apr 2007, 5:16 PM
very liked it :) Hope jack put this code up to ext-all.js

bendy
23 Apr 2007, 8:03 AM
Glad you liked it.. Let me know if you find any bugs or have a feature request. :)

Nullity
23 Apr 2007, 11:30 AM
Wow, I actually just implemented this feature myself last week, but I wanted to add a little more to it before I posted it here. I hope you don't mind, I "borrowed" your small regex as I forgot to add that ;) . Here is my code (there is still more I want to do with it, but it works as-is):


/**
* @class Ext.form.ColorField
* @extends Ext.form.TriggerField
* Provides a color input field with a {@link Ext.ColorPalette} dropdown.
* @constructor
* Create a new ColorField
* <br />Example:
* <pre><code>
var color_field = new Ext.form.ColorField({
fieldLabel: 'Color',
id: 'color',
width: 175,
allowBlank: false
});
</code></pre>
* @param {Object} config
*/
Ext.form.ColorField = function(config){
Ext.form.ColorField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.ColorField, Ext.form.TriggerField, {
/**
* @cfg {String} invalidText
* The error to display when the color in the field is invalid (defaults to
* '{value} is not a valid color - it must be in the format {format}').
*/
invalidText : "{0} is not a valid color - it must be in a the hex format {1}",
/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
* which displays a color wheel icon).
*/
triggerClass : 'x-form-color-trigger',
/**
* @cfg {String/Object} autoCreate
* A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "text", size: "10", autocomplete: "off"})
*/

// private
defaultAutoCreate : {tag: "input", type: "text", size: "10", maxlength: "7", autocomplete: "off"},

// Limit input to hex values
maskRe: /[a-f0-9]/i,
regex: /[a-f0-9]/i,

// private
validateValue : function(value){
if(!Ext.form.ColorField.superclass.validateValue.call(this, value)){
return false;
}
if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
return true;
}

var parseOK = this.parseColor(value);

if(!value || (parseOK == false)){
this.markInvalid(String.format(this.invalidText, value, '#AABBCC'));
return false;
}

return true;
},

// private
// Provides logic to override the default TriggerField.validateBlur which just returns true
validateBlur : function(){
return !this.menu || !this.menu.isVisible();
},

/**
* Returns the current value of the color field
* @return {String} value The color value
*/
getValue : function(){
return Ext.form.ColorField.superclass.getValue.call(this) || "";
},

/**
* Sets the value of the color field. You can pass a string that can be parsed into a valid HTML color
* <br />Usage:
* <pre><code>
colorField.setValue('#FFFFFF');
</code></pre>
* @param {String} color The color string
*/
setValue : function(color){
Ext.form.ColorField.superclass.setValue.call(this, this.formatColor(color));
},

// private
parseColor : function(value){
return (!value || (value.substring(0,1) != '#')) ?
false : true;
},

// private
formatColor : function(value){
if (value && (this.parseColor(value) == false)) {
value = '#' + value;
}

return value;
},

// private
menuListeners : {
select: function(e, c){
this.setValue(c);
},
show : function(){ // retain focus styling
this.onFocus();
},
hide : function(){
this.focus();
var ml = this.menuListeners;
this.menu.un("select", ml.select, this);
this.menu.un("show", ml.show, this);
this.menu.un("hide", ml.hide, this);
}
},

// private
// Implements the default empty TriggerField.onTriggerClick function to display the ColorPalette
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.ColorMenu();
}

this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));

this.menu.show(this.el, "tl-bl?");
}
});
Also, I attached the icon that I made and a sample image.

bendy
23 Apr 2007, 11:49 AM
Looks great Nullity! Feel free to use whatever code you want. I don't need to extend this any further for my project but it is great to see someone else continuing the same thing. :)

hemper
24 Apr 2007, 12:01 PM
I add formula which extract foreground color from background..



if (!this.validateColor(color)){
return false;
}

var fgColor = this.defaultFgColorl,
bgColorBr = this.hex2rgb(color);
fgColor = ((bgColorBr.R * 299) + (bgColorBr.G * 587) + (bgColorBr.B * 114)) / 1000 - 125 < 0 ? "#FFF" : "#000";

this.el.setStyle({
'background-color': color,
'background-image': 'none',
'color' : fgColor
});




// private
hex2dec: function(hexchar) {
return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
},
// private
hex2rgb: function(color) {
color = color.replace("#", "");
return {
R : (this.hex2dec(color.substr(0, 1)) * 16) + this.hex2dec(color.substr(1, 1)),
G : (this.hex2dec(color.substr(2, 1)) * 16) + this.hex2dec(color.substr(3, 1)),
B : (this.hex2dec(color.substr(4, 1)) * 16) + this.hex2dec(color.substr(5, 1))
}
}

tataye
30 Apr 2007, 6:48 AM
Hello Nullity,

Your code doesn't like the empty cells : Then I click in an empty cell I have a #<div c :-?

Sorry, I made an error It works !

Nullity
30 Apr 2007, 10:54 AM
I updated the regex's:

maskRe: /[#a-f0-9]/i,
regex: /^#([a-f0-9]{3}|[a-f0-9]{6})$/i,
I also made these 2 other small changes:

// replace line 28 with this
invalidText : 'This is not a valid color - it must be in a the hex format "#1A2B3C"',

// replace line 61 with this
this.markInvalid(this.invalidText);

moraes
16 May 2007, 10:11 AM
Thank you guys, this is exactly what I need, and it works very well. :)

stever
8 Jun 2007, 12:46 PM
Here is a trigger image with all the states...

quilleashm
13 Jul 2007, 1:04 AM
Fix for the gif file. Two of the images were one pixel too narrow.

Joy
9 Aug 2007, 4:06 AM
Hey,
your ColorField seems perfect!
but I guess it also can be extended with "NoColor" and "Transparency" (slider) controls,
by default, color is transparent ... (screen's in attach)
Now I need to use extended color palette with alpha channel defining. So, simply color is defined with 4bytes, for example: #FF00FF00, where leading byte is alpha channel. This color format is standart for ChartDirector library (http://www.advsofteng.com) for example. I really understand that this is not so important for usual needs, but I need it very much.
Have anybody any ideas/ready examples about this topic?

stevefink
27 Sep 2007, 7:27 AM
Is there documentation available for extending Ext's base without actually altering it? I'd love to try some of the samples here for a project I'm working on. I'd rather stuff the code in an adjacent file than modifying ext's source.

Thanks :-)

- sf

Nullity
27 Sep 2007, 12:04 PM
Just paste the code into a new text file with a .js extension then source it after the Ext files. So if you name the file 'ColorField.js', the header of your page will contain something like this:


<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript" src="ColorField.js"></script>

stever
1 Oct 2007, 8:24 PM
I'm having a problem where sometimes FireFox gives this sporatic error:


[Exception... "'Permission denied to get property HTMLDivElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Anyone have any ideas how to work around it???

This version deals with emptyText as a default color, and shows the color in the trigger. When I figure out the error above I'll post to the Wiki...



/**
* @class Ext.ux.ColorField
* @extends Ext.form.TriggerField
* Provides a color input field with a {@link Ext.ColorPalette} dropdown.
* @constructor
* Create a new ColorField
* <br />Example:
* <pre><code>
var color_field = new Ext.ux.ColorField({
fieldLabel: 'Color',
id: 'color',
width: 175,
allowBlank: false
});
</code></pre>
* @param {Object} config
*/

Ext.ux.ColorField = Ext.extend(Ext.form.TriggerField, {
/**
* @cfg {String} invalidText
* The error to display when the color in the field is invalid (defaults to
* '{value} is not a valid color - it must be in the format {format}').
*/
invalidText : "'{0}' is not a valid color - it must be in a the hex format (# followed by 3 or 6 letters/numbers 0-9 A-F)",
/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
* which displays a color wheel icon).
*/
triggerClass : 'x-form-color-trigger',
/**
* @cfg {String/Object} autoCreate
* A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "text", size: "10", autocomplete: "off"})
*/

// private
defaultAutoCreate : {tag: "input", type: "text", size: "10", maxlength: "7", autocomplete: "off"},

// Limit input to hex values
maskRe: /[#a-f0-9]/i,

// private
validateValue : function(value){
if(!Ext.ux.ColorField.superclass.validateValue.call(this, value)){
return false;
}
if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
this.setColor('');
return true;
}

var parseOK = this.parseColor(value);

if(!value || (parseOK == false)){
this.markInvalid(String.format(this.invalidText,value));
return false;
}
this.setColor(value);
return true;
},

/**
* Sets the current color and changes the background.
* Does *not* change the value of the field.
* @param {String} hex The color value.
*/
setColor : function(color) {
if (color=='' || color==undefined)
{
if (this.emptyText!='' && this.parseColor(this.emptyText))
color=this.emptyText;
else
color='transparent';
}
if (this.trigger)
this.trigger.setStyle( {
'background-color': color
});
else
{
this.on('render',function(){this.setColor(color)},this);
}
},

// private
// Provides logic to override the default TriggerField.validateBlur which just returns true
validateBlur : function(){
return !this.menu || !this.menu.isVisible();
},

/**
* Returns the current value of the color field
* @return {String} value The color value
*/
getValue : function(){
return Ext.ux.ColorField.superclass.getValue.call(this) || "";
},

/**
* Sets the value of the color field. You can pass a string that can be parsed into a valid HTML color
* <br />Usage:
* <pre><code>
colorField.setValue('#FFFFFF');
</code></pre>
* @param {String} color The color string
*/
setValue : function(color){
Ext.ux.ColorField.superclass.setValue.call(this, this.formatColor(color));
this.setColor( this.formatColor(color));
},

// private
parseColor : function(value){
return (!value || (value.substring(0,1) != '#')) ?
false : (value.length==4 || value.length==7 );
},

// private
formatColor : function(value){
if (!value || this.parseColor(value))
return value;
if (value.length==3 || value.length==6) {
return '#' + value;
}
return '';
},

// private
menuListeners : {
select: function(e, c){
this.setValue(c);
},
show : function(){ // retain focus styling
this.onFocus();
},
hide : function(){
this.focus.defer(10, this);
var ml = this.menuListeners;
this.menu.un("select", ml.select, this);
this.menu.un("show", ml.show, this);
this.menu.un("hide", ml.hide, this);
}
},

// private
// Implements the default empty TriggerField.onTriggerClick function to display the ColorPalette
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.ColorMenu();
}

this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));

this.menu.show(this.el, "tl-bl?");
}
});

Ext.reg('colorfield',Ext.ux.ColorField);



CSS:

.x-form-field-wrap .x-form-color-trigger {
background-image: url(/themes/common/ac/color-trigger.png);
}

.ie6 .x-form-field-wrap .x-form-color-trigger {
background-image: url(/themes/common/ac/color-trigger.gif);
}

stevefink
2 Oct 2007, 8:00 AM
Just curious... where in Ext's source should I be looking to figure out what exactly the following constructor is trying to do:




Ext.form.ColorField = function(config){
Ext.form.ColorField.superclass.constructor.call(this, config);
this.on('render', this.handleRender);
};



I'd like to learn this code better, and I'm not entirely sure where the method on() is defined.

Thanks!

ansh
28 Dec 2007, 3:57 AM
I am trying to change the colorfield value. But it is giving error inside setColor() like 'this.el has no properties'.



new Ext.form.ColorField({
fieldLabel: 'Color',
id:'colpicker',
showHexValue:true
}),
............................................

Ext.getCmp('colpicker').setColor('FFFFFF') //error this.el has no properties



Where i am wrong while changing the color through setColor function ?

ansh
28 Dec 2007, 4:20 AM
Sorry, please ignore the previous post. Actually i was calling the setColor() before the colorfield object render. ;)

amon
13 Feb 2008, 2:03 PM
I'm having a problem where sometimes FireFox gives this sporatic error:
Anyone have any ideas how to work around it???
Yeah, set the autocomplete property of the form (or the input) to 'off'.

stever
14 Feb 2008, 11:57 AM
It is off already... :(

BigBen4711
16 Mar 2008, 4:09 AM
Hi,

is this function correct ?


getValue : function(){
return this.curValue || this.defaultValue || "FFFFFF";
},

Shouldn't it look like this?:


getValue : function(){
return this.curColor || this.defaultValue || "FFFFFF";
},

cu,
ben

brookd
18 Mar 2008, 5:35 PM
Any idea why I might see an empty colormenu when I try to run this code? This only happens when using the code as a gridEditor / cellEditor:

new Ext.grid.GridEditor(new Ext.ux.ColorField({fieldLabel: 'Color',id: 'color',width: 175,allowBlank: false}))

extJS_learner
20 Mar 2008, 12:04 AM
Seems to work well. Thanks for your efforts. One question, how might I attach catch the event of a new color being selected?

wm003
30 Apr 2008, 12:26 AM
This version deals with emptyText as a default color, and shows the color in the trigger.



Thanks for this rev. works perfect for me. i only used the other gif (with the colorcircle) instead of the dropdown-array.gif deplyioed in the attachment zip.

Thank you very much for sharing! :)

mephi
11 Jul 2008, 4:19 AM
How can use:
on.('select', function( params?){...}); for colorField ?

can you tell me if it`s possible ... I tried several code but with no success.

thanks

junkzilla
7 Aug 2008, 3:38 AM
It's just a silly thing but...

I think could be nice to add this line below:


Ext.reg('colorfield', Ext.form.ColorField);

;)

ovan
25 Aug 2008, 7:08 AM
how to add the property "editable" to the code as the combobox has?

mschering
27 Sep 2008, 3:23 AM
I improved this class a little bit. It now takes the value config property as the default value and you can override the default color palette by passing an array of colors.

Eg.


{
xtype:'colorfield',
fieldLabel: GO.lang.color,
value:'EBF1E2',
name:'background',
colors:[
'EBF1E2',
'95C5D3',
'FFFF99',
'A68340',
'82BA80',
'F0AE67',
'66FF99',
'CC0099',
'CC99FF',
'996600',
'999900',
'FF0000',
'FF6600',
'FFFF00',
'FF9966',
'FF9900'
]
}


/**
* Based on code found at http://extjs.com/forum/showthread.php?t=5106
*
* Modified by Merijn Schering <[email protected]>
*
* Changes:
* -Handles value better. Uses value config property as start value.
* -Removed changed trigger image because it didn't handle state.
* -Added colors config property so you can overide the default color palette *
*
* @class GO.form.ColorField
* @extends Ext.form.TriggerField
* Provides a very simple color form field with a ColorMenu dropdown.
* Values are stored as a six-character hex value without the '#'.
* I.e. 'ffffff'
* @constructor
* Create a new ColorField
* <br />Example:
* <pre><code>
var cf = new Ext.form.ColorField({
fieldLabel: 'Color',
hiddenName:'pref_sales',
showHexValue:true
});
</code></pre>
* @param {Object} config
*/


GO.form.ColorField = Ext.extend(function(config){

this.menu = new Ext.menu.ColorMenu();
this.menu.palette.on('select', this.handleSelect, this );

this.menu.on(Ext.apply({}, this.menuListeners, {
scope:this
}));

if(config.colors)
{
this.menu.palette.colors=config.colors;
}

GO.form.ColorField.superclass.constructor.call(this, config);

},Ext.form.TriggerField, {

/**
* @cfg {Boolean} showHexValue
* True to display the HTML Hexidecimal Color Value in the field
* so it is manually editable.
*/
showHexValue : false,

/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
* which displays a calendar icon).

triggerClass : 'go-form-color-trigger',
* */

/**
* @cfg {String/Object} autoCreate
* A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "text", size: "10", autocomplete: "off"})
*/
// private
defaultAutoCreate : {tag: "input", type: "text", size: "1", autocomplete: "off", maxlength:"6"},

/**
* @cfg {String} lengthText
* A string to be displayed when the length of the input field is
* not 3 or 6, i.e. 'fff' or 'ffccff'.
*/
lengthText: "Color hex values must be either 3 or 6 characters.",

//text to use if blank and allowBlank is false
blankText: "Must have a hexidecimal value in the format ABCDEF.",

/**
* @cfg {String} color
* A string hex value to be used as the default color. Defaults
* to 'FFFFFF' (white).
*/
//defaultColor: 'FFFFFF',

maskRe: /[a-f0-9]/i,
// These regexes limit input and validation to hex values
regex: /[a-f0-9]/i,

//private
curColor: 'ffffff',

// private
validateValue : function(value){
if(!this.showHexValue) {
return true;
}
if(value.length<1) {
this.el.setStyle({
'background-color':'#' + this.defaultColor
});
if(!this.allowBlank) {
this.markInvalid(String.format(this.blankText, value));
return false
}
return true;
}
if(value.length!=3 && value.length!=6 ) {
this.markInvalid(String.format(this.lengthText, value));
return false;
}
this.setColor(value);
return true;
},

// private
validateBlur : function(){
return !this.menu || !this.menu.isVisible();
},

// Manually apply the invalid line image since the background
// was previously cleared so the color would show through.
markInvalid : function( msg ) {
GO.form.ColorField.superclass.markInvalid.call(this, msg);
this.el.setStyle({
'background-image': 'url(../lib/resources/images/default/grid/invalid_line.gif)'
});
},

/**
* Returns the current color value of the color field
* @return {String} value The hexidecimal color value

getValue : function(){
return this.curValue || this.defaultValue || "FFFFFF";
}, */

/**
* Sets the value of the color field. Format as hex value 'FFFFFF'
* without the '#'.
* @param {String} hex The color value
*/
setValue : function(hex){
GO.form.ColorField.superclass.setValue.call(this, hex);
this.setColor(hex);
},

/**
* Sets the current color and changes the background.
* Does *not* change the value of the field.
* @param {String} hex The color value.
*/
setColor : function(hex) {
this.curColor = hex;

this.el.setStyle( {
'background-color': '#' + hex,
'background-image': 'none'
});
if(!this.showHexValue) {
this.el.setStyle({
'text-indent': '-100px'
});
if(Ext.isIE) {
this.el.setStyle({
'margin-left': '100px'
});
}
}
},

// private
menuListeners : {
select: function(m, d){
this.setValue(d);
},
show : function(){ // retain focus styling
this.onFocus();
},
hide : function(){
this.focus();
var ml = this.menuListeners;
this.menu.un("select", ml.select, this);
this.menu.un("show", ml.show, this);
this.menu.un("hide", ml.hide, this);
}
},

//private
handleSelect : function(palette, selColor) {
this.setValue(selColor);
},

// private
// Implements the default empty TriggerField.onTriggerClick function to display the ColorPicker
onTriggerClick : function(){
if(this.disabled){
return;
}

this.menu.show(this.el, "tl-bl?");
}
});

Ext.reg('colorfield', GO.form.ColorField);

piston
15 Jan 2009, 11:23 AM
I'd like to use this extension - which post has the most-updated js file? Is the original post up to date?

**edit** nvm, http://extjs.com/learn/Extension:ColorField

hansi1985
9 Feb 2009, 9:13 AM
hello i am a newbee! I need the colorpicker but it doesnt work!
Can everbody post the HMTL-File??

Thanks

blafleur
3 Mar 2009, 8:44 AM
It works like a champ.. I love it, thanks. Although I did have to make the changes that BigBen4711 (http://extjs.com/forum/member.php?u=14094) suggested to get the correct values to POST.... else it was just posting FFFFFF the default value.

KevinChristensen
11 Mar 2009, 12:18 PM
Is there a way to use the ColorField or ColorPalette inside an EditorGrid? I would like to use it similar to how a textField works to allow the user to choose a color and have that value returned back to the cell in the grid.

This code from the ColumnModel will display the ColorField as expected but I don't know how to get the value of the grid set to the value passed back from the ColorField. I can put a listener on the Editor which gives me the color chosen but I still don't know how to set the value of the grid cell.

{header:'Colors',width:75,sortable:false,dataIndex:'WEB_COLOR_HEX',
editor:new Ext.ux.ColorField({value:'0000FF'})

},

Diego Franck
27 Mar 2009, 11:54 AM
Does anyone knows how to pick the hexadecimal value from a database and set it into the colorfield component ? But, i don't wanna show the hexadecimal value on the field.. I need to show the color correspondent.

janhov
14 May 2009, 5:26 AM
Seems to work well. Thanks for your efforts. One question, how might I attach catch the event of a new color being selected?

This is a problem for me as well. Nothing happens when I select a new color:



{
xtype: 'colorfield',
fieldLabel: 'Color',
id: 'colorA_cf',
allowBlank: false,
width: combo_width,
value: "#FFFF00",
listeners: {
'select': {
fn: function()
{
alert("!");
},
scope: this
}
}
}

janhov
20 May 2009, 3:56 AM
When I try


menuListeners: {
'select': {
fn: function()
{
alert("!");
},
scope: this
}
}

the alert fires, but the color doesn't change.. Why?

iceblast_01
14 Apr 2010, 7:26 PM
i get an error when i load the record to the form using form.form.loadRecord(record); have anyone encountered this?
- nevermind sorry I am using 3.0

sherza
24 Oct 2010, 4:41 AM
Thank you very much! Your script was very useful for me

Jhonatas
25 Oct 2010, 12:08 PM
Its work but see the error :S
i'm learning ext now

leandro.lopes
23 Nov 2010, 2:49 AM
Not working in IE.

Joe Kuan
20 Apr 2011, 10:38 AM
Cool extension.

After some minor changes, I managed to get this working with RowEditorGrid. Two columns, one for setting foreground-color, another for setting background-color, another one to preview the combination of both.

Here is a screenshot

Joe Kuan
20 Apr 2011, 10:41 AM
Cool extension.

After some minor changes, I managed to get it working with the ExtJS 3.2 RowEditorGrid. One column for setting foreground, one for background and one for preview of both.

Here is a screenshot

Kimbal
16 May 2011, 3:56 AM
Would you mind sharing the changes you made to the .js to get it working under Ext Js 3.2?
Thanks

Joe Kuan
18 May 2011, 12:25 AM
Sorry, I meant I didn't change any original code in ColorField to get it working in ExtJS 3.2.

All I did is to add some routines inside the ColorField class to get preview color column working in RowEditor.

I downloaded the ColorField from http://www.sencha.com/learn/Extension:ColorField, not from the head of this thread. Not sure, that makes the difference.

Joe

Kimbal
18 May 2011, 12:36 AM
I think it's the same code as the one posted here.
I'm interested to know what routines you added inside the class to get it working with RowEditor

Thanks a lot
Toni

Joe Kuan
19 May 2011, 4:19 AM
I have just done a diff side by side. The ColorField source code is significantly different. Try to get one from http://www.sencha.com/learn/Extension:ColorField and see whether that works for you.

As for changes I have made, I'll need sometime to writeup what I have done. Will let you know probably in a week or so.

Cheers
Joe

Kimbal
19 May 2011, 4:29 AM
Thanks a lot, I've downloaded the one from http://www.sencha.com/learn/Extension:ColorField,
and I'll give it a try as soon as I can

Cheers
Toni

attack11
19 May 2011, 1:00 PM
Anyone know why the select event wouldn't fire? On my workstation I have proper behavior but when the code is pushed to the staging server the event never fires, and the menu stays open.

Both deployments are based on the same git repository, so I'm confused.

attack11
19 May 2011, 1:58 PM
I think I figured out my problem, the images were coming from S3 and that is invalid for canvas.getImageData because it's cross domain.

lizucagirl
1 Jun 2011, 7:39 AM
Hi,
I am using ColorField for my project, but I am experiencing problems with setValue. My Firebug informs me: 'this.el is undefined' (this.el.setStyle in ColorField.js line 136)
My code:

var settingsAgtOfflineColor = new Ext.form.ColorField({
id: 'settingsAgtOfflineColor',
fieldLabel: softdial.lang.reporter.settingsAgtOfflineColor,
hiddenName:'settings_AgtOfflineColor',
showHexValue:true
});

var UIOptions = new Ext.FormPanel({
id:'UIConf',
title: softdial.lang.reporter.settingsUIOptions,

url: 'Reporter_Settings.xml',
reader: new Ext.data.XmlReader({
record: 'Item',
success: '@success'
}, softdial.reporter.settings.record),
.....
items:[{
xtype:'fieldset',
title: softdial.lang.reporter.settingsAgtStatusViewer,
collapsible: true,
autoHeight:true,
defaults: {width: 210},

items :[
settingsAgtOfflineColor
]
}]

});
UIOptions.on({
actioncomplete: function(form, action) {

if (action.type == 'load') {

var Item2 = action.result.data;


Ext.getCmp("settingsAgtOfflineColor").setValue(Item2.AgtStatus_AgtOffline);

}
}
});
UIOptions.getForm().load({
method: 'get',
params:
{
ID:'RepConf'
},
failure: function(form, action) {
Ext.Msg.show({title: "Data unavailable", msg: action.result.errorMessage});
}
});

Please help me to elucidate this!
Many thanks!

attack11
18 Jul 2011, 10:28 AM
I experience the same bug/error with IE8.

eva656
3 Oct 2011, 3:12 AM
And in my case the only thing that doesn't work is my custom "Disabled" class. I'd like to show the color when the form-field is rendered as cialis (http://originalcialis.com) disabled but I wasn't able to get it working. Maybe somebody can shed some light on this? What else has to be done, other than creating a class named "ColorField_Disabled". Do I have to "wire" it to the ColorField class somehow?

Romick
27 Oct 2011, 4:12 AM
Did anyone rewrite ColorField in Ext JS 4? Becouse it not working for me. Can anybody share working example of ColorField? Please, i am newbee and i need your help.

g.sidler
4 Nov 2011, 7:26 AM
Look here for a new version of ColorField for Ext JS 4:

http://www.sencha.com/forum/showthread.php?140793-Simple-Ext.ux.ColorField-plugin

Gabe

Wariato
18 Dec 2011, 10:20 AM
??????, ??? ???????? www.sencha.com, ? ???-?? ???? ???????? ???? ??? ???? ? RSS ? ????... ?? ?????...

Wariato
19 Dec 2011, 2:20 AM
? ?? ??????????? ?????????? ??? ???? ?? www.sencha.com , ???? ?????? - ?????????!

manog
24 Feb 2012, 4:58 AM
I am using ext js 3.4 in web application
I have download color picker extension from
http://www.sencha.com/forum/showthre...PickerField.It (http://www.sencha.com/forum/showthread.php?73998-3.x-Ext.ux.ColorPickerField.It) is working fine if i am put in panel,but it is not working properly in editable grid panel.In editable grid panel selected value not getting after choose the color from color picker,it is show default value(FFFFFF) for all selection.
I can use lot of column in editable grid panel.
I put color picker in one column of editable grid panel.I am not getting selected value if i can click another column of grid panel after select the color from color picker.

So please anybody reply me ,

Thanks

Manoharan G(09677870534)

manog
24 Feb 2012, 5:12 AM
I am using ext js 3.4 in web application<br>
I have download color picker extension from<br>
<a href="showthread.php?73998-3.x-Ext.ux.ColorPickerField.It" target="_blank">http://www.sencha.com/forum/showthre...PickerField.It</a>
is working fine if i am put in panel,but it is not working properly in
editable grid panel.In editable grid panel selected value not getting
after choose the color from color picker,it is show default value(FFFFFF) for all
selection.<br>I can use lot of column in editable grid panel.<br>I put color picker in one column of editable grid panel.I am not getting selected value if i can click another column of grid panel after select the color from color picker. <br>
<br>
So please anybody reply me ,<br>
<br>
Thanks <br>
<br>

youss.imzourh
12 May 2012, 9:39 AM
Hi,

Thanks for this useful ux.

Here is a set of colors commonly used in Web :

"000000", "333333", "666666", "999999", "CCCCCC", "FFFFFF", "00CC00", "00CC33", "33CC00", "33CC33", "66CC00", "66CC33", "00CC66", "33CC66", "00FF00", "00FF33", "00FF66", "33FF00", "66FF00", "33FF33", "33FF66", "66FF33", "66FF66", "99FF00", "99FF33", "99FF66", "99FF99", "CCFF66", "99CC00", "CCFF99", "99CC66", "669933", "339933", "009933", "339900", "007326", "336600", "336633", "003300", "006633", "009966", "339966", "669966", "66CC66", "66CC99", "33CC99", "99CC99", "00FF99", "33FF99", "CCFFCC", "99FFCC", "66FFCC", "99FFFF", "66FFFF", "00FFFF", "33FFFF", "33FFCC", "00FFCC", "33CCCC", "00CCCC", "66CCCC", "00CC99", "339999", "009999", "006666", "FFFF66", "FFFF33", "FFFF00", "FFFF99", "FF9966", "FFCC00", "CCCC66", "CCCC33", "CCCC00", "999933", "999900", "999966", "666633", "666600", "333300", "663300", "996633", "996600", "CC9933", "FFCC66", "FFCC99", "FF9933", "FF9900", "FF6600", "CC9966", "000033", "000066", "003366", "333366", "003399", "333399", "3300CC", "0033CC", "006699", "0000FF", "3300FF", "3333FF", "0033FF", "0066FF", "3366FF", "0066CC", "666699", "3366CC", "6666FF", "336699", "0099CC", "6699CC", "3399CC", "0099FF", "6699FF", "3399FF", "00CCFF", "33CCFF", "66CCFF", "99CCFF", "CCFFFF", "99CCCC", "669999", "336666", "003333", "330066", "330099", "6600CC", "6600FF", "6633CC", "6633FF", "CCCCFF", "660099", "660066", "663399", "9900CC", "993399", "9933CC", "9900FF", "9933FF", "996699", "9966CC", "9966FF", "663366", "CC00FF", "CC66CC", "CC99FF", "CC33FF", "CC66FF", "FF99FF", "330033", "660033", "990066", "CC0099", "CC3399", "CC6699", "FF0099", "FF3399", "FF33CC", "FF00CC", "FF33FF", "FF00FF", "FF66CC", "FF99CC", "FFCCFF", "660000", "990033", "990000", "993333", "CC3333", "CC6666", "CC6633", "CC6600", "CC3300", "993300", "663333", "FF0066", "FF3366", "FF6666", "FF6699", "FF9999", "FFCCCC", "330000", "CC9999", "FF6633", "FF3300", "FF0033", "FF3333", "FF0000", "CC3366", "CC0066", "CC0033"

See you.

mimmo.rossi73
21 May 2012, 6:03 AM
Hi,
i use extjs 2.1, i need to be able to choose the color from a wide choice of colors, but since I can not put a huge list of colors, let me know if there is a possibility to insert a choice.
Thanks in advance

michaelcohen
20 Nov 2012, 9:05 AM
Can you please explain how to implement? I keep getting errors when I try to add this to my code. I am adding it at the head of the .js file I am working in, and calling the constructor onready