Simple Ext.ux.ColorField plugin

[slammer]

I decided to migrate this plugin http://www.sencha.com/learn/legacy/Extension:ColorField to ExtJS 4.


Ext.define('Ext.ux.ColorField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.colorfield',
requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],

lengthText: "Color hex values must be either 3 or 6 characters.",
blankText: "Must have a hexidecimal value in the format ABCDEF.",

regex: /^[0-9a-f]{3,6}$/i,

validateValue : function(value){
if(!this.getEl()) {
return true;
}
if(value.length!=3 && value.length!=6) {
this.markInvalid(Ext.String.format(this.lengthText, value));
return false;
}
if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
this.markInvalid(Ext.String.format(this.blankText, value));
return false;
}

this.markInvalid();
this.setColor(value);
return true;
},

markInvalid : function( msg ) {
Ext.ux.ColorField.superclass.markInvalid.call(this, msg);
this.inputEl.setStyle({
'background-image': 'url(../resources/themes/images/default/grid/invalid_line.gif)'
});
},

setValue : function(hex){
Ext.ux.ColorField.superclass.setValue.call(this, hex);
this.setColor(hex);
},

setColor : function(hex) {
Ext.ux.ColorField.superclass.setFieldStyle.call(this, {
'background-color': '#' + hex,
'background-image': 'none'
});
},

menuListeners : {
select: function(m, d){
this.setValue(d);
},
show : function(){
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);
}
},

onTriggerClick : function(e){
if(this.disabled){
return;
}

this.menu = new Ext.menu.ColorPicker({
shadow: true,
autoShow : true
});
this.menu.alignTo(this.inputEl, 'tl-bl?');
this.menu.doLayout();

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

this.menu.show(this.inputEl);
}
});

[SenchaGuru]

Thank you, .. this is exactly what I was trying to do, ..

Maybe someone should update the plugin page, .. this would've saved me hours trying to get that to work (:|

Excelent work ;)

[janhov]

Thanks a lot! I find this component very useful.

[Izhaki]

Thanks a lot for sharing.

Shouldn't it be:



validateValue : function(value){


if (this.allowBlank && !value)
{
return true
}


if(!this.getEl()) {
return true;
}
if(value.length!=3 && value.length!=6) {
this.markInvalid(Ext.String.format(this.lengthText, value));
return false;
}
if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
this.markInvalid(Ext.String.format(this.blankText, value));
return false;
}


return true;
},

[apriza_ymail]

cann't run in ie.. i am using ie 8

[lastcrown]

on setColor, remove '#'

[before]
background-color': '#' + hex,

[after]
'background-color': hex,