Difference between baseCls, cmpCls and cls

[Veritus]

Hi Sencha Developer,

i'm new to sencha touch and currently i'am working on a custom panel for my project. For styling, i discovered the 3 options: baseCls, cmpCls and cls.

It would be great if someone could explain me the differences. i already tested all 3 options and i could't recognize a visual difference.

kind regards,

veri

[elishnevsky]

baseCls is the base CSS class to apply to a component's element when it is rendered. It is defined in all visual components and very rarely should be overwritten. For example baseCls of Panel is "x-panel". If you change it in your subclass or instance of Panel, it will not inherit the default look and feel defined by Sencha Touch css files and you will have to do your own styling.

cmpCls should be used when you create an extended component. It will be appended to element's class attribute of the Component when it is rendered. For example:

MyPanel = Ext.extend(Ext.Panel, {
    cmpCls: 'my-panel',
    ...
});

The rendered html will look something like this: <div class="x-panel my-panel">...</div>

cls should be used when you create an instance of a component. Its value will also be appended to the class attribute.

[Veritus]

Thank you very much elishnevsky for this explanation. Now the hole thing is clear.

[napsys]

Excellent. Thanks. Just what I was looking for.

[Veritus]

I followed that explanation and used the cls option of my main panel instance (normal panel, not extended). Now i have the problem that the height and width of the css class aren't correctly delivered to the main panel.

Here an example:

CSS:

.custom-mainpanel {
width: 600;
height: 300;
}

JS:

var mainPanel = new Ext.Panel({
			cls: 'custom-mainpanel',
			fullscreen: false,
			floating: true,
			hideOnMaskTap: false
		}).show();

When i view the result vie firebug, the mainPanel has a height of 481px and a width of 600px. Where does the additional 181px come from?

Hope someone can give me a hint.

kind regards

EDIT: i found out that it depends on the dockeditems of the panel.