View Full Version : Proper way to style nested container titles using SASS variables?

16 Dec 2011, 7:21 AM
What's the recommended way of achieving this? I have the following overrides in my SASS variables;

$panel-header-font-size: 14px;
$panel-header-line-height: 20px;

Which make the panel titles much bigger. I only really want a bigger title for my outermost component, which would represent a kind of page title, with any items beneath it using a smaller size.

What I'm wondering is;
Do I have to use CSS to style e.g. .x-panel .x-panel .x-panel-header-default?
Can I set classes on a panel's title elements individually? (I couldn't see how to do this at http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel).
Can it be done using the SASS variables provided by Ext?
Thanks a lot.

16 Dec 2011, 9:39 AM
The easiest way to do this is through CSS, so just add an ID to the container and apply the style to the header wrapper:

#aGridComponent .x-panel-header-text { font-size: 1.2em; }

17 Dec 2011, 9:47 AM
My problem is that other deeply nested panel headers would also receive that style

17 Dec 2011, 11:43 AM
That won't be the case for a single grid with a unique ID?