Question

I have nested tab panels, (outer tab panel groups inner tabs), like the outer panel is Contacts, and then inside it you have a tab panel for each open contact item, another outer panel is Opportunities and in it you have a tab panel for each open opportunity.

This is confusing to users at first, so I would like to add some styling to tab panels, so users can differentiate and give meaning to outer and inner tabs.

I had zero success tough with syling a tabPanel, what is the right way to do it? bodyCfg, tbar, tbarCls, baseClass???? I never dealt with styling a widget in ExtJS and I’m struggling for half a day with no success.

Any pointers on how styling works especially for TabPanels is appreciated.

thanks,

Hazım

Answer 1

I find more than often you need to get your hands dirty with CSS when it comes to styling ExtJS controls.

This is the general strategy that I follow that’s been working for me so far.

1. you need chrome debugger or similar that allows you to view HTML and change CSS styles on the fly.

2. look at the HTML for the widget in chrome debugger and manually tweak the styles until you find the exact DOM node that you need to style.

3. Look for a config variable in the widget that allows you to style that node you found in step 2. Most of the variables are named “xxxCls”. This takes experience, there is no short cut, for example what you could do is set the “baseCls” and look at the resulted HTML to see where in the DOM tree that class is inserted.

4. quite often you will find there is no config variable available to style the thing you want (for example the line-height of the header bar in most panels). In this case you will have to overwrite the default ExtJS CSS class to the value you want. Standard good CSS practice applies.