在ExtJS的mordern版本中，缺少颜色选择器

这里提供一个自己封装的 xtype:'colorfield'

选取面板：

1.颜色面板

继承的是Ext.Component

通过XTemplete渲染的颜色面板

constructor(config) {
config = config || {};
config.tpl = [
    '<tpl for=".">',
    '<a href="#" role="button" class="color-{.} colorButton" data-color="{.}">',
    '<span class="inner" data-color="{.}" style="background:#{.}">&#160;</span>',
    '</a>',
    '</tpl>'
   ];
    config.data = [
    '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
    '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
    'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
    'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
    'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
    ];
    this.callParent([
    config
    ]);
},

颜色面板里有个tap事件

onTapMe(e) {
    const t = Ext.fly(e.target);
    if(!t)return;
    var color=t.dom.dataset.color;
    if(color)
    this.fireEvent('select',this,color);
},

2.Field控件

调取颜色面板，floatePicker是ExtJS中 picker类的属性，或称之为配置项

floatedPicker: {
    xtype: 'colorpicker',
    floated: true,
    listeners: {
    select: 'onPickerChange',//监听select函数 注意颜色面板里 触发 select事件
    scope: 'owner'
    }
},

为field赋值事件

onPickerChange(picker, value){
var me = this;
    if (me.$ignorePickerChange) {
    return;
    }
    me.forceInputChange = true;
    me.setValue(value);
    //更新块的背景色
    me.inputWrapElement.first().applyStyles({
        backgroundColor: '#' + value,
    });
    me.forceInputChange = false;
     
    me.onTabOut(picker);
},