View Full Version : Default and Custome CSS in EXTJS

26 Dec 2012, 1:13 AM

I am trying to change the default CSS of the EXTJS where i am facing lot of problems to get the proper process to change the CSS for each component.

Please advice me whether there is any particular process to change the default CSS of the EXTJS.

Thanks in advance.

26 Dec 2012, 6:19 AM
The easiest way to make large-scale changes to component styles is by creating a custom theme. Since this topic is so large, it doesn't lend itself to a simple forum answer. However, you should begin by studying the theming resources that Sencha has available. Start here: http://www.sencha.com/learn/theming/

26 Dec 2012, 9:02 PM
Thanks for you reply, I am trying to change the color of panel header.

.my-header .x-panel-header {
background: yellow;
border: 2px solid red;
height: 40px;

This is the css i am using to change the color of panel header by giving "cls: my-header" in that respective panel definition.
But it is effecting to all panels that i am creating.

Can you help me in this, how to restrict the usage of this css class to a single class.

27 Dec 2012, 3:14 AM
Hmm, not sure. When I try your code, it works as expected: http://jsfiddle.net/existdissolve/ZXcuk/

Are you sure you haven't put "cls" in a defaults config or something?

27 Dec 2012, 3:37 AM
I very sure i didnt gave it in the defaults.

Please check this link http://jsfiddle.net/ZXcuk/7/ , I dont want css to be applicable for that sample panel also.
I want it only for my Panel.