View Full Version : Ext.ux.ColorField

11 Mar 2008, 12:47 PM
Recently I found myself in need of a Color Picker. I checked out what Ext had to offer, and wasn't totally satisfied with Ext.ColorPalette, so I decided to write my own.

My ColorField widget uses <canvas>, so isn't support in some major browsers, but falls back to the Ext.ColorPalette when necessary support is missing.

For those interested, you can find the widget at:


11 Mar 2008, 12:57 PM
Good work!!

Thanks for share!!

10 May 2008, 2:02 AM
I love this widget, it's beautiful and easy to use.

The only problem I had is that it tries to change the color of the container during the render and in my case, I don't want a default value in the textbox, so I just added a conditional. Here's the page where I'm using it: http://www.freewebs.com/jokurocks/ExtJS/resources/css/Themer.html

onRender : function(ct, position){
Ext.ux.ColorField.superclass.onRender.call(this, ct, position);
this.fireEvent('change', this, this.value);

15 May 2008, 7:20 AM
Great plugin! I've been using it and the client loves it.

A word to possibly help the next guy out, though: I only store the hex (without the #) in the database. If the hex number is only numeric when re-populating the color field (such as 336699), the app errors in the following line:

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

It can't do a substring of what JS thinks is an integer.

I didn't want to change the js to cast value to String, because I like to keep plugins free of my meddling (to make upgrades easier). So, I add a # at the beginning of this data when I pull it back out from the database when populating this field.

Best wishes,

10 Jun 2008, 7:30 PM
Hi there, looks really nice for the color wheel plugin! I'm rather new to ext js but i run to some problem when trying to run this great plugin!

When i downloaded it, there are no images in the image folder and when I try to run it I got an error saying this.gradient has no properties. Did I not do something? Thanks for any input!

11 Jul 2008, 5:01 AM
yes I downloaded the zip to and there is no images on images directory ... can u please check the archive again?

11 Jul 2008, 9:05 AM
i like the field too!

suggestion: add a listener for onKeypress = "enter" to submit changes typed in directly (connect it to the function "onLosefocus").

kind regards, tobiu