这是重新设置ExtJS应用程序的正确方法吗？

Question

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

现在我想让它适应特定的布局设计,例如我想改变颜色并在"应用程序"一词后面添加一个图形.我一直在阅读有关如何编辑ExtJS主题的信息,但它不是我想要更改的核心组件,而是屏幕上的特定区域,例如此页面标题.

所以我正在研究的方法是查看Firebug中的HTML输出:

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

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

这在大多数情况下都可以工作,但这似乎非常突然,例如在某些地方,我可以设计我需要的区域的唯一方法是使用看似任意的元素id,例如

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

这似乎非常脆弱,好像这些id号在将来可能会改变等.

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

Answer 1

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

现在,如果你想为每个组件覆盖一个ExtJS css类,那么你就像第一个例子那样.