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

Question

尝试使用色域用户体验，默认设置是在您选择一种颜色后，它会在选择器中显示该颜色的十六进制值。我的用户不知道那是什么意思……我怎样才能将选择器的背景颜色设置为所选颜色（没有文本十六进制值）？谢谢！

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;
        }
    }
}

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

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

Ext JS 6 colorfield UX - show color instead of value

extjs

background-color

extjs6

extjs6.5