css - 这是重新设计 ExtJS 应用程序样式的正确方法吗？

Question

我在 ExtJS 中有一个 Web 应用程序并使用了灰色主题。

现在我想适应它以适应特定的布局设计，例如我想更改颜色并在“应用程序”一词后面添加图形。我一直在阅读有关 how to edit ExtJS Themes 的信息但我想要更改的不是核心组件，而是屏幕上的特定区域，例如这个页眉。

所以我要解决这个问题的方法是在 Firebug 中查看 HTML 输出:

然后在一个额外的 CSS 文件中对我认为会影响我的样式更改的标签进行样式设置，例如

.x-panel-body-noheader {
    background-color: #307E7E;
 }

这在大多数情况下都有效，但是这似乎非常偶然发生，例如在某些地方，我可以为我需要的区域设置样式的唯一方法是使用看似任意的元素 id，例如

div#ext-comp-1003 {
    background-color: #307E7A;
}

这看起来很脆弱，好像这些 id 号码将来可能会改变等等。

这是设置 ExtJS 应用程序样式的正确方法还是有更合适的方法？

Answer 1

这不是正确的方法，因为不能保证 ID 相同。大多数分机组件都有一个 style可用于自定义 css 的属性或者您可以指定一个用于样式的 css 类。您可以在组件定义中执行此操作。

现在，如果您想为每个组件覆盖一个 ExtJS css 类，那么您可以像您的第一个示例那样做。