如何动态更改ExtJS面板的背景颜色

Question

我目前在另一个大面板中有两个面板。左侧面板用于导航，右侧用于内容。我正在尝试修改内容面板背景颜色，因此我创建了一个在expandnode上触发的事件，这就是我被困住的地方。

我的右侧面板ID为#panneau-affichage，我正在尝试修改其中包含的类x-panel-body的background-color属性。使用：

Ext.get('panneau-affichage').setBodyStyle('backgroundColor : #dddddd');

Firebug声称没有这样的功能，并且：

Ext.get('panneau-affichage').applyStyle('backgroundColor: #dddddd);

这可以完成div的工作，但会被x-panel-body覆盖。

Answer 1

解决方案：

Ext.getCmp('panel-id').body.setStyle('background','lightblue');

Answer 2

为什么不通过CSS设置它？使用Firebug向下钻取到面板的body div元素。使用面板的ID编写自己的覆盖。通过这种方式，它可以在没有Javascript的情况下工作，并且甚至在您开始运行脚本之前也是如此。

使用CSS类名
如果您没有考虑永久性的更改和设置，那么定义一个CSS类并将该类添加到面板本身并通过CSS设置面板的主体样式仍然会好得多。它将是集中式的，并且可以更好地定制。并且它会保持风格远离你的代码，你应该永远实现你的代码。将代码与视觉效果分开。

Answer 3

您正在使用Ext.get（）。这将返回一个Ext.Element对象，该对象没有setBodyStyle（）函数。 Ext.Element不是HTML节点，但您可以将其视为包装器。

您使用的正确函数是setStyle（String / Object property，[String value]）。如果我没有完全弄错，为了你的需要，这应该有效：

Ext.get('panneau-affichage').setStyle('backgroundColor','#dddddd');