ExtJS 4 difference between componentCls, cls and bodyCls?

Question

In ExtJS 4, what's the difference between componentCls, cls and bodyCls ?

Answer 1

ExtJS provide many options in styling the components. Each of these property have its place in implementing proper theming of your components.

cls: This is applied to the component's root element. Quoting from the docs:

An optional extra CSS class that will be added to this component's Element. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

By default, this is empty. If you need to style some child elements (by elements don't mean ExtJs components.. instead, they are HTML elements auto generated by the framework) of a component then, you can use this. For example, If you want to change background color of you's tab panel's inner area, you can do something like this:

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

componentCls: This also gets applied to the component's root element. But, this property is meant to hold CSS styles for the component as a whole. Quoting from the docs:

CSS Class to be added to a components root level element to give distinction to it via styling.

From result point of view, both cls and componentCls gets applied to the root element. But, the are used for different purposes.

bodyCls: This is available for Panels. You will not find this styling for a button because, there is no body. If you want to provide custom styles for your panel's body region.. you can do so by setting this property.