Ext JS 6色域UX-显示颜色而不是值 [英] Ext JS 6 colorfield UX - show color instead of value

问题描述

尝试使用色域UX，默认值是选择一种颜色后，它会在选择器中显示该颜色的十六进制值.我的用户不知道这意味着什么...我该如何将选择器的背景颜色设置为选定的颜色(没有文本十六进制值)?谢谢！

Trying to use the colorfield UX and the default is that after you choose a color it shows the hex value of that color in the picker. My users don't know what that means... how can I instead set the background-color of the picker to the chosen color (without the text hex value)? Thanks!

小提琴

推荐答案

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

You cannot easily remove the value from the input field, because that would cause issues with the picker and form submission. You can, however, adjust both text color and background color:

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

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

This means the hex value is still visible if someone selects the text in the colorfield:

这篇关于Ext JS 6色域UX-显示颜色而不是值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！