Extjs4 颜色选择器 ColorField

Extjs没有自带的颜色选择器，我在这自己实现了一个,使用方法与datafield完全一样

步骤如下：

1.实现一个Ext.form.field.Picker的子类

2.重写父类的createPicker方法，这个方法就是创建一个Ext.picker.Color对象。

3.写一个图标样式,及图片

.x-form-color-trigger {

    background-image: url('../images/trigger-color.gif');
}

代码如下:

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) {
                    me.setValue(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);
                    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');
                    }
                }
            }
        });
    }
});

最终效果如下: