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

【问题标题】：How to dynamically change the background color of an ExtJS panel如何动态更改 ExtJS 面板的背景颜色
【发布时间】：2009-07-13 20:20:35
【问题描述】：

我目前在另一个大面板中有两个面板。左侧面板用于导航，右侧用于内容。我正在尝试修改内容面板的背景颜色，所以我创建了一个在 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 覆盖。

【问题讨论】：

【解决方案1】：

解决方案：

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

【讨论】：

【解决方案2】：

为什么不直接通过 CSS 设置呢？使用 Firebug 向下钻取到面板的主体 div 元素。使用面板的 ID 编写您自己的覆盖。这样它就可以在没有 Javascript 的情况下运行，并且始终甚至在您开始运行脚本之前。

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

【讨论】：

【解决方案3】：

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

您可以使用的正确函数是 setStyle(String/Object property, [String value])。如果我没有完全弄错，根据您的需要，这应该可以：


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

【讨论】：

我有点理解 ext.element 没有 setBodyStyle 但您对 .setStyle 的猜测与我之前提到的 .applyStyle 所做的相同，它为“panneau-affichage”设置了背景" 但它被 x-panel-body 超越。
Ext 通常将面板包装在三个 div 中。如果您需要设置背景，则需要在这三个中的最后一个上进行。您可以在 ExtJs 的示例页面上对此进行测试：extjs.com/deploy/dev/examples/panel/panels.html 转到 firebug 控制台并使用此函数：Ext.get('panel-basic').first().last().first().setStyle('background' ,'lightblue') 注意 - id 为 panel-basic 的 div 是面板的容器，它不是三个与面板相关的 div 的一部分。 - 你需要使用 ...first().last()... 因为 first().first() 会返回面板的标题。