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

我目前在另一个大面板中有两个面板。左面板用于导航，右面板用于内容。我正试图修改内容面板的背景颜色，所以我制作了一个事件，在expandnode上触发，这就是我被卡住的地方

我的右面板ID是

#panneau affichage

，我正在尝试修改位于其中的x-panel-body类的

背景色属性。使用：

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

Firebug表示不存在此类功能，并且：

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

这对div起作用，但被x-panel-body覆盖。
为什么不通过CSS设置它呢？使用Firebug向下钻取面板的主体div元素。使用面板的id编写您自己的覆盖。这样，它将在不使用Javascript的情况下工作，并且总是甚至在您开始运行脚本之前工作

使用CSS类名

如果您不考虑永久性的更改和设置，那么最好定义一个CSS类，将该类添加/删除到面板本身，并通过CSS设置面板的主体样式。这将是集中化的，更好的定制。它会让风格远离你的代码，这是你应该一直努力实现的。将代码与视觉效果分开。
为什么不通过CSS进行设置？使用Firebug向下钻取面板的主体div元素。使用面板的id编写您自己的覆盖。这样，它将在不使用Javascript的情况下工作，并且总是甚至在您开始运行脚本之前工作

使用CSS类名

如果您不考虑永久性的更改和设置，那么最好定义一个CSS类，将该类添加/删除到面板本身，并通过CSS设置面板的主体样式。这将是集中化的，更好的定制。它会让风格远离你的代码，这是你应该一直努力实现的。将代码与视觉效果分开。
您使用的是Ext.get（）。这将返回一个Ext.Element对象，该对象没有setBodyStyle（）函数。不是HTML节点，但您可以将其视为它的包装器

要使用的正确函数是setStyle（字符串/对象属性，[String value]）。如果我没有完全错的话，出于您的需要，这应该是可行的：


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

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

要使用的正确函数是setStyle（字符串/对象属性，[String value]）。如果我没有完全错的话，出于您的需要，这应该是可行的：


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

解决方案：

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

解决方案：

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

为什么不直接设置面板？因为它需要在触发器事件时更改为什么不直接设置面板？因为它需要在触发器事件时更改我不能，我没有用它来设置永久状态。我需要更改某些触发器的背景色。我不能，我没有用它来设置永久状态。我需要更改某些触发器的背景色。我知道ext.element没有setBodyStyle，但您猜测的.setStyle与我前面提到的.applyStyle做的事情相同，它为“panneau affichage”设置了良好的背景但是它被x-panel-body超越了。Ext通常将面板包裹在三个分区中。如果你需要设置背景，你需要在这三个背景中的最后一个进行设置。您可以在ExtJs的示例页面上进行测试：转到firebug控制台并使用以下函数：Ext.get（'panel-basic'）.first（）.last（）.first（）.setStyle（'background'，'lightblue'）注意-id为panel basic的div是面板的容器，它不是三个面板相关div的一部分您需要使用…first（）.last（）。。。由于first（）.first（）将返回面板的标题。我有点理解ext.element没有setBodyStyle，但您对.setStyle的猜测与我前面提到的.applyStyle相同，它为“panneau affichage”设置了良好的背景但是它被x-panel-body超越了。Ext通常将面板包裹在三个分区中。如果你需要设置背景，你需要在这三个背景中的最后一个进行设置。您可以在ExtJs的示例页面上进行测试：转到firebug控制台并使用以下函数：Ext.get（'panel-basic'）.first（）.last（）.first（）.setStyle（'background'，'lightblue'）注意-id为panel basic的div是面板的容器，它不是三个面板相关div的一部分您需要使用…first（）.last（）。。。因为first（）.first（）将返回面板的标题。