我正在尝试为我的元素动态分配样式（在本例中为ExtJS displayfield）。
我不能使用CSS类，因为在运行之前我不知道颜色是什么。
我正在尝试：
myDisplayField.getEl().applyStyles({ color: '#ff0000' }); //fail
myDisplayField.getEl().setStyle('color', '#ff0000'); //fail
只是为了让机制正确，但似乎都不起作用。
它使用Ext.get(<div id>).setStyle(...)，但这对我来说似乎并不干净。前一次尝试不起作用是否有原因？
我错过了什么？ 感谢。
答案 0 :(得分：6)
原因很简单：你试图在错误的元素上设置样式。每个字段（包括displayfield）都具有相当复杂的基于表的DOM结构，它封装了字段标签，实际输入元素（或显示字段的div）以及支持元素。 field.getEl()返回组件的 top 或main元素;在这种情况下，它是顶部<table>标记。你需要的是输入元素。
现在，如果你看一下DOM结构，你会注意到你需要设置样式的<div>的id为displayfield-123-inputEl。 -inputEl后缀是有原因的;在大多数情况下，它表示该元素在其各自的Component中具有Ext.dom.Element快捷方式。对于字段，将该字段呈现给DOM后可用的field.inputEl属性。你也可以使用它：
myDisplayField.inputEl.setStyle(...)
或者只使用字段可用的便捷方法：
myDisplayField.setFieldStyle(...)
我还建议不要硬编码颜色，而是使用CSS类。在大多数情况下，根据条件选择颜色有限，例如无效输入等。使用CSS需要更多的工作，但是当你有人想出一个明亮的东西时，它会让你头疼不已。改变用于无效输入的红色阴影的想法，或者某些。