Ext JS 6 colorfield UX - 显示颜色而不是值

Question

尝试使用colorfield UX，默认情况是在选择颜色后，它会在选择器中显示该颜色的十六进制值。我的用户不知道这意味着什么...我怎样才能将选择器的背景颜色设置为所选颜色（没有文本十六进制值）？谢谢！

fiddle

Answer 1

您无法轻松地从输入字段中删除该值，因为这会导致选择器和表单提交出现问题。但是，您可以调整文本颜色和背景颜色：

listeners: {
    afterrender: function(cmp) {
        if(cmp.inputEl && cmp.inputEl.dom) {
            cmp.inputEl.dom.style.backgroundColor = "#" + cmp.getValue();
            cmp.inputEl.dom.style.color = "#" + cmp.getValue();
        }
    },
    change: function(cmp, nV) {
        if(cmp.inputEl && cmp.inputEl.dom) {
            cmp.inputEl.dom.style.backgroundColor = "#" + nV;
            cmp.inputEl.dom.style.color = "#" + nV;
        }
    }
}

这意味着如果有人选择了色域中的文字，则十六进制值仍然可见：