ExtJS 4 componentCls，cls和bodyCls之间的区别？

Question

在ExtJS 4中，componentCls，cls和bodyCls之间有什么区别？

Answer 1

ExtJS提供了许多样式化组件的选项。这些属性中的每一个都可以实现组件的正确组合。

cls ：这适用于组件的根元素。引用文档：

  

将添加到此组件的可选额外CSS类   元件。这对于添加自定义样式非常有用   使用标准CSS规则的组件或其任何子组件。

默认情况下，这是空的。如果你需要设置一些子元素（通过元素不代表ExtJs组件，而不是它们是框架自动生成的HTML元素），那么你可以使用它。例如，如果要更改选项卡面板内部区域的背景颜色，可以执行以下操作：

.customCss x-box-inner {
     background-color: yellow;
} 

componentCls ：这也会应用于组件的根元素。但是，此属性用于保存组件的CSS样式。引用文档：

  

要添加到要提供的组件根级别元素的CSS类   通过造型来区分它。

从结果的角度来看，cls和componentCls都应用于根元素。但是，它们用于不同的目的。

bodyCls ：这适用于面板。您不会为按钮找到这种样式，因为没有正文。如果要为面板的主体区域提供自定义样式，可以通过设置此属性来实现。