PDA

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



andynuss
8 Jul 2009, 4:01 PM
Hi,

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:


<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="./resources/css/ext-all.css"/>
<script
type="text/javascript"
src="./adapter/ext/ext-base-debug.js">
</script>
<script
type="text/javascript"
src="./ext-all-debug.js">
</script>
<script
type="text/javascript">
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
</script>
<style type="text/css">
#stag-book .x-panel-body {
background-color: #fff;
</style>
</head>
<body>
<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',
}
]
});
</script>
</body>
</html>

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

Help appreciated!
Andy

mjlecomte
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.

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

TommyMaintz
8 Jul 2009, 9:54 PM
http://extjs.com/learn/Screencasts

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