View Full Version : Changing tab height in tabbar using Compass theming

30 Dec 2011, 1:31 PM
I successfully used theming with Compass (http://www.sencha.com/learn/theming/) and Ext4.0.7 to change tab height in tabbar using:

$tab-height: 40px !default;
at the top of my-theme.scss

This, however, changes the height of tabs globally, in all TabPanels, while I would be able to customize different TabPanels of my app in different way. For Panel or ProgressBar it can be done using @mixin/ui (http://www.sencha.com/learn/theming/), but there is no ui for TabPanel.

So is it possible at all to change selectively $tab-height only for some TabPanel classes?

I would like to do it in scss theme, in a custom-ui-like way, avoiding a hassle of customizing final css like described here (http://stackoverflow.com/questions/7237795/change-the-height-of-an-extjs-4-tab).

31 Dec 2011, 7:25 AM
You will need to specify a cls on the tabpanels you want the tabs to be changed and do some SCSS in that cls.

6 Jan 2012, 12:37 PM
OK, so I did as suggested, used the cls.

For the record, below I put a way that makes tweaking the tabpanel css using cls config a little bit easier.

First, of course set:

cls: 'MainPanel'
in TabPanel config.

Then, create a custom theme:

$include-default: false;

// customize tab variables:
$tab-height: 40px !default;
$tabbar-strip-height: 7px !default;

@import 'ext4/default/all';

// include only TabPanel-related stuff
.MainPanel { @include extjs-tabbar; };
.MainPanel { @include extjs-tab; };

$relative-image-path-for-uis: true; // defaults to "../images/" when true

and copy all tab height-related CSS rules to another CSS file.

The point of this procedure is that it will automatically generate all rules by calculating height of all elements just based on $tab-height and putting .MainPanel at front:

.MainPanel .x-border-box .x-tab-bar-top .x-tab-bar-body-default-plain {
height: 43px;