View Full Version : Theming: Apply a class to All Individual Parts of a Component?

26 Sep 2008, 3:13 PM

I'm searching for a way to apply a CSS class to all the individual parts of a panel so that I can theme it.

Only the outermost panel's theme may be altered. All nested panels must retain the theme for the overall page.

Approaches I've Considered:
cls: Only applies to the outermost div of the panel. Any other panels inside this one would be impacted. Violates requirement.

baseCls: Applies directly to all parts of the panel, but requires me to find all definitions from ext-all.js which contain 'x-panel' (94 occurrances), and redefine them in my own theme's CSS file. Insane amout of effort, and introduces a lot of fragility.

What (I think) I Really Need:
Something similar to cls, but would let me assign an additional class to every div in the hierarchy which makes up the panel. This would allow me to selectively override only those definitions necessary to accomplish the theming, and just let ext-all.css handle the majority.

Hopefully I'm missing something simple. Any ideas?

27 Sep 2008, 2:57 PM
In lieu of advice to the contrary, I've taken the latter (baseCls) approach. For this articular purpose, I've been able to reduce the necessary number of overridden x-panel- class definitions from 94 to 20.

I also had to edit Panel.js to remove a hardcoded...

' x-panel-nofooter'and replace it with

' ' + this.baseCls + '-nofooter'

It's a very fragile workaround. If there's anyone out there who's gotten this deep into theming that might be able to offer a better suggestion, I'd sure appreciate the advice.