CODEWITHSUNDEEP
javascriptextjs4.1
hsnGunda
hsnGunda

Reputation: 347

How to change style of tab panel headers(title) and panel headers in extjs4

I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change??? if so can some one pls let me know

thanks

Upvotes: 3

Views: 9750

Answers (3)

Dawesi
Dawesi

Reputation: 586

You don't use css directly

you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.

Upvotes: 0

Reimius
Reimius

Reputation: 5712

For Panel headers: To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default To change the background you would need to modify: x-panel-header-default

For tab headers you need to modify: For the text:x-tab-inner For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active

Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.

Upvotes: 3

Dan Wuensch
Dan Wuensch

Reputation: 132

For styling the text in the tab headers:

Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.

This will affect the text within each tab title in the TabContainer.

Example:

a.ajax__tab_tab {
color: #00898D;
}

Upvotes: 1

Related Questions