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

Question

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

Answer 1

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

cls:这适用于组件的根元素.引用文档:

一个可选的额外CSS类,将添加到此组件的Element中.这对于使用标准CSS规则向组件或其任何子项添加自定义样式非常有用.

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

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

componentCls:这也应用于组件的根元素.但是,此属性用于保存组件的CSS样式.引用文档:

要添加到组件根级别元素的CSS类,以通过样式区分它.

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

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