ExtJS:动态改变元素样式

Question

我正在尝试为我的元素动态分配样式(在本例中为ExtJS displayfield).

我不能使用CSS类,因为我不知道运行时的颜色是什么.

我尝试着:

myDisplayField.getEl().applyStyles({ color: '#ff0000' });  //fail
myDisplayField.getEl().setStyle('color', '#ff0000');       //fail

只是为了让机制正确,但似乎都不起作用.

它可以使用Ext.get(<div id>).setStyle(...),但这对我来说似乎并不干净.以前的尝试是否有效？

我错过了什么？谢谢.

Answer 1

原因很简单:你试图在错误的元素上设置样式.每个字段(包括displayfield)都具有相当复杂的基于表的DOM结构,它封装了字段标签,实际输入元素(或显示字段的div)以及支持元素.field.getEl()返回组件的top或main元素; 在这种情况下,这是顶级<table>标签.你需要的是输入元素.

现在,如果你看一下DOM结构,你会注意到<div>你需要设置样式的id是displayfield-123-inputEl.-inputEl后缀是有原因的; 在大多数情况下,它表示该元素在其各自的Component中具有Ext.dom.Element快捷方式.对于字段,这将field.inputEl是在将字段呈现给DOM之后可用的属性.你也可以使用它:

myDisplayField.inputEl.setStyle(...)

或者只使用字段可用的便捷方法:

myDisplayField.setFieldStyle(...)

我还建议不要硬编码颜色,而是使用CSS类.在大多数情况下,根据条件选择颜色有限,例如无效输入等.使用CSS将需要更多的工作,但是当你有人想出一个明亮的东西时,它将为你节省很多麻烦改变用于无效输入的红色阴影的想法,或者某些.