Ext JS 6 colorfield UX：如何显示颜色而非十六进制值

嘿，这问题我熟！要实现让ColorField选择器的背景变成所选颜色，同时隐藏用户看不懂的十六进制文本，咱们可以从修改组件模板和自定义CSS两方面入手，一步步来：

步骤1：自定义ColorField组件，替换选择器模板 #

默认的ColorPicker会在每个颜色项里渲染十六进制文本，咱们直接重写它的模板，只保留颜色块部分就行。创建一个自定义的ColorField组件：

Ext.define('CustomColorField', {
    extend: 'Ext.ux.colorpick.Field',
    alias: 'widget.customcolorfield',

    createPicker: function() {
        // 先调用父类方法创建默认选择器
        var picker = this.callParent(arguments);
        
        // 替换选择器的项模板，去掉十六进制文本，只保留颜色背景块
        picker.itemTpl = [
            '<div class="x-colorpicker-item">',
                '<div class="x-colorpicker-color" style="background:{value}"></div>',
            '</div>'
        ].join('');
        
        return picker;
    }
});

步骤2：添加CSS样式优化显示效果 #

光改模板还不够，默认的颜色块有内边距和边框，咱们需要调整样式让颜色块填满整个选择器选项：

/* 确保颜色块填满整个选项区域 */
.x-colorpicker-item {
    padding: 0 !important;
}

.x-colorpicker-item .x-colorpicker-color {
    width: 100% !important;
    height: 100% !important;
    border: none !important; /* 可选：去掉默认边框，让颜色显示更完整 */
}

步骤3：使用自定义组件替换原ColorField #

在你的代码里，把原来的xtype: 'colorfield'换成咱们自定义的xtype: 'customcolorfield'就行，比如：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'customcolorfield',
        fieldLabel: '选择颜色',
        value: '#ff0000' // 默认红色
    }]
});

这样设置后，选择器里的每个选项都会直接显示对应颜色的背景，再也看不到用户看不懂的十六进制值啦！

内容的提问来源于stack exchange，提问作者zeke