Ext JS 6 colorfield UX - show color instead of value

Question

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!

fiddle

Answer 1

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: