Handleing defualt CSS classes from ExtJS

[pinidbest]

Hi all, I want to understnad the default machnism to handle and override default classes for the various xtypes.

For example when creating a simple button (xtype:button) the following html is renderd:


<div style="border-width: 1px; height: 25px;" id="button-1011" class="x-btn x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon">

<em id="button-1011-btnWrap">

<button hideFocus="true" style="width: 64px; height: 19px;" i
d="button-1011-btnEl" class="x-btn-center" role="button"
type="button" autocomplete="off">
<span style="width: 64px; height: 19px; line-height: 19px;"
id="button-1011-btnInnerEl" class="x-btn-
inner">test</span>
<span id="button-1011-btnIconEl" class="x-btn-icon
"></span>

</button>

</em>

</div>



Because I want to change the background color for this button and only this I dont want to change in my CSS the style for all buttons by writing:

.x-btn-inner { color:green!important; background-color:red!important;}I tried adding cls or baseCls to the button instane in the items configuration but it is adding the class name to the div and not removing all other class.Whats the way to remove all other classes or doing this properly?Thanks

[skirtle]

Use cls to add a class to the outer element then use a CSS selector to target the relevant descendant.


cls: 'myCls'


.myCls .x-btn-inner {
...
}

For components that support it (e.g. buttons) you could alternatively use a ui config. This is used in conjunction with the theme generation, which can prove useful when you need to generate the background images for older IEs.