如何动态更改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');