Ext.ux.ColorField

[rpetrello]

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:

http://ryanpetrello.com/ext-ux/ColorField/

[galdaka]

Good work!!

Thanks for share!!

[joku]

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);
if(this.value)
this.fireEvent('change', this, this.value);
},

[graveyardfashions]

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,
Cat

[crashburn]

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!

[mephi]

yes I downloaded the zip to and there is no images on images directory ... can u please check the archive again?

[tobiu]

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