4

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

我不能使用 CSS 类,因为直到运行时我才知道颜色是什么。

我正在努力:

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

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

它可以使用Ext.get(<div id>).setStyle(...),但这对我来说似乎并不干净。以前的尝试不起作用是有原因的吗?

我错过了什么?谢谢。

4

1 回答 1

6

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

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

myDisplayField.inputEl.setStyle(...)

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

myDisplayField.setFieldStyle(...)

我还建议不要对颜色进行硬编码,而是使用 CSS 类。在大多数情况下,颜色的选择是有限的,具体取决于条件,例如无效输入等。使用 CSS 将需要更多的前期工作,但会为您省去很多麻烦,因为有人会想出一个明亮的颜色改变用于无效输入或类似的红色阴影的想法。

于 2013-09-26T18:08:39.553 回答