`Ext.define('ColorField', {extend:'Ext.form.field.Picker',alias:'widget.colorfield',requires:['Ext.p
`Ext.define('ColorField', {extend:'Ext.form.field.Picker',alias:'widget.colorfield',requires:['Ext.picker.Color'],triggerCls:'x-form-color-trigger',createPicker:function () {var me = this;return Ext.create('Ext.picker.Color', {pickerField:me,renderTo:document.body,floating:true,hidden:true,focusOnShow:true,listeners:{select:function (picker, selColor) {
// 实现根据选择的颜色来改变背景颜色,根据背景颜色改变字体颜色,防止看不到值 var r = parseInt(selColor.substring(0,2),16); var g = parseInt(selColor.substring(2,4),16); var b = parseInt(selColor.substring(4,6),16); me.setValue("("+r+","+g+","+b+")"); var a = new Ext.draw.Color(r,g,b); var l = a.getHSL()[2]; if (l > 0.5) { me.setFieldStyle('background:#' + selColor + ';color:#000000'); } else{ me.setFieldStyle('background:#' + selColor + ';color:#FFFFFF'); } picker.hide(); } } }); } });`