View Full Version : ColorField

10 Jul 2007, 8:48 AM
Hi all,

I needed a Ext js field for the ColorPalette. I cribbed the DateField and altered it to display a ColorPalette etc. It submits the six character string for the hex RGB value. It works but there is one major ugliness.

It works by when the palette value is selected it changes the background colour of the input field (and also removes the background-image style). But I found that when a value is selected if you drag-select or double-click in the field the six character value becomes highlighted. I couldn't find a portable style for altering the highlight font/background colours. So I created a hidden field and moved the name of the main input field over.

Any comments/improvements appreciated. Note I have not tested this in a Ext form, just applyTo() on a standalone input text field.

Here's the code (LGPL).

Ext.form.ColorField = function(config){
Ext.form.ColorField.superclass.constructor.call(this, config);

Ext.extend(Ext.form.ColorField, Ext.form.TriggerField, {
* @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-arrow-trigger'
* which displays a calendar icon).
triggerClass : 'x-form-arrow-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"},

readOnly : true,

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

getValue : function(){
return this.hiddenInput.dom.value;

setValue : function(colorString){
this.el.setStyle( "background-image", "none" );
this.el.setStyle( "background-color", "#" + colorString );
this.el.setStyle( "color", "#" + colorString );
this.hiddenInput.dom.value = colorString;

// private
menuListeners : {
select: function(m, colorString){
show : function(){ // retain focus styling
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.menu == null){
this.menu = new Ext.menu.ColorMenu();

this.menu.on(Ext.apply({}, this.menuListeners, {

// select the initial value in the color palette
if (this.getValue())
this.menu.palette.value = this.getValue();

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

onRender : function(ct, position){
// on rendering creating a hidden input to hold the actual value as storing it in the main field
// causes the 6-digit value to be shown if the user double clicks/selects the field content
// there is no standard CSS style (that I can see) to set the highlight font/background color
var inputName = this.el.dom.name;
var inputValue = this.el.dom.value;

this.hiddenInput = ct.createChild({tag: "input", type: "hidden", name: inputName});

if (inputValue)

Ext.form.ColorField.superclass.onRender.call(this, ct, position);


10 Jul 2007, 9:00 AM
mind putting this up as an Ext.ux @ Ext Community Extensions (http://extjs.com/learn/Ext_Extensions) wiki? :)

11 Jul 2007, 9:48 AM
This is actually a dupe of


which looks better than my effort (custom icon and probably cleaner code).