ExtJS:将大小/边距/填充放在组件或外部 .css 文件中？`

Question

在指定组件中的大小/边距/填充信息(即通过 JavaScript 以编程方式添加)与将其放在外部 CSS 文件中时，是否有“最佳实践”？

我已经养成了做前者的习惯。但是我可以看到有些人争论将这些东西放在一个外部 CSS 文件中，这样理论上你就可以修改不同主题的布局(大小/边距/填充)。

其他人怎么看？是否有既定的最佳实践？

谢谢。

Answer 1

我发现最好的方法是为所有组件分配类并在 CSS 文件中设置它们的样式。例如...

var styledPanel = new Ext.Panel({
    cls: 'panel-styled',
    items: [ ]
});

然后有一个 CSS 规则来设置它的样式...

.styled-panel {
    background-color: #e7e7e7;
}

显然，这也允许您将组件样式组合在一起。

作为旁注，我通常使用 bodyStyle属性来添加不太可能改变的格式，例如……大多数 Windows 需要填充，这不太可能经常改变，所以我把它放在 bodyStyle 中。属性(property)。

var paddedWindow = new Ext.Window({
    title: 'Window',
    bodyStyle: 'padding: 4px;'
});