View Full Version : controlling panel class (font, background-color)

8 Jul 2009, 4:01 PM

I'm trying to setup a panel with which I will load external content, at the control of various buttons. I need complete control over the css for this panel, and as a test, I created a viewport which uses a content panel with baseCls='x-plain'.

This indeed made it so the browser uses its default body font, which I want, but sets the background color to light blue. I want a white background by default, and controllable for each content pulled from the database if necessary. So I created an id for my panel and set the x-panel-body background color to white for this id.

What I found is that this worked only if I don't set baseCls to x-plain meaning:

1) baseCls='x-plain', set x-panel-body background color to white
you get light light blue background and default body font
2) just set x-panel-body background color to white and don't set baseCls
you get white background but a font chosen by extjs, not the default browser font

I want both for this test, and in general to be able to completely control the css inheritance of the content panel.

Here's my code:

Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
<style type="text/css">
#stag-book .x-panel-body {
background-color: #fff;
<script type="text/javascript">
new Ext.Viewport({
layout : 'border',
defaults : {
frame : true,
split : true
items : [
region : 'north',
height : 150,
minHeight : 150,
maxHeight : 150,
collapsible : true
title : 'Bookmarks',
region : 'east',
width : 200,
minWidth : 20,
maxWidth : 400,
collapsible : true
title : 'Nav',
region : 'west',
width : 200,
minWidth : 20,
maxWidth : 400,
collapsible : true,
region : 'center',
//baseCls : 'x-plain',
id : 'stag-book',
autoLoad : {
url : 'content/book.html',
scripts : true,
autoScroll : true,
xtype : 'panel',

With book.html being simple html that says hello. No styling there.

Help appreciated!

8 Jul 2009, 6:24 PM
Have you seen the video where Jack Slocum shows how he skins a Window? Check the wiki video section for a link.

8 Jul 2009, 7:37 PM
I could not find this link in the wiki section.

8 Jul 2009, 9:54 PM

CSS, Theming - http://link.brightcove.com/services/player/bcpid1842749445?bctid=1828663203