代码之家 › 专栏 › 技术社区 › zeke

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

extjs6.5 extjs6 background-color extjs

zeke · 技术社区 · 6 年前

尝试使用颜色字段UX,默认情况下,在选择颜色后,它会在选择器中显示该颜色的十六进制值。我的用户不知道这意味着什么。。。如何将选择器的背景色设置为所选颜色(没有文本十六进制值)?谢谢

fiddle

1 回复 | 直到 6 年前

Alexander 6 年前

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

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

这意味着,如果有人选择颜色字段中的文本,十六进制值仍然可见:

推荐文章

Ieva PavilonytÄ · 根据一个单元格的值给几个单元格着色

2 年前

Ida Isabella Thor-Rasmussen · 使用JS更改输入字段的背景色

6 年前

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

6 年前

glennbrann · 设置SKScene背景色动画

6 年前

darkoJ · 根据所选按钮的状态更改其背景色

6 年前

Kyle Lemon · 突出显示页脚背景和内容之间的跨距

6 年前

Robbert · 在颤振中选择后更改ListTile的背景色

7 年前

Gabriele Cozzolino · 在不使用findcontrol的情况下获取中继器中的div

7 年前

funkysoul · 浏览器之间的CSS颜色差异

7 年前

Jay Strawn · SquareSpace:更改节背景色(Eamon/Ethan模板)

7 年前