Ext.ux.ColorField

ColorField is a user extension component for the popular Javascript library, ExtJS.

Though the current version of ExtJS already has a palette component which allows you to select colors, it is not quite fancy enough for my liking. The ColorField widget incorporates a much nicer color picker into a TriggerField, making it highly effective and reusable as a form component.

Browser Compatibility

The ColorField widget is implemented in a slightly untraditional way. Most stock DHTML color pickers found on the web utilize complex math or spurious DOM population to create their clickable palettes. These methods can end up being costly, and difficult to implement and maintain. This widget, however, uses <canvas> to draw its clickable palette.

Not all browsers currently have sufficient support for the <canvas> element. In browsers without necessary <canvas> support, the color picker will gracefully fall back to the one provided with ExtJS. The following is a list of platforms this widget has been tested against:

Firefox 2 (Win/Mac)
Opera 9+ (Win)
Safari 3+, Chrome (Latest) (Win/Mac)

Download Source

This widget is built for compatability with ExtJS 3.x, and will likely (thought I've not tried) break with prior versions.

http://github.com/ryanpetrello/ext-ux/tree/master/ext-ux/ColorField/

Live Demo

Change the values in the Ext form fields below and watch the effects!

Form Field Example

Fallback Example

ryanpetrello.com