PDA

View Full Version : CSS and Ext



GregT
2 Nov 2009, 1:01 PM
I am obviously not understanding how CSS and Ext interact. Can someone quickly explain this simple scenario:



<style type="text/css">
foo-orange {background-color: orange;}
foo-red {background-color: red;}
</style>

Ext.onReady(function(){

p1 = new Ext.Panel({
//cls: 'foo-red',
//baseCls: 'foo-red',
//bodyCssClass: 'foo-red',
overCls: 'foo-red',
height: 100,
html: 'this is insider p1',
title: 'this is p1'
});

p2 = new Ext.Panel({
height: 150,
html: '<foo-orange>this is inside p2</foo-orange>',
items: p1,
title: 'this is p2'
});

v = new Ext.Viewport ({
items: p2
});

});


In a nutshell, the orange works as expected, but the red doesn't; uncommenting any of these has no effect (I realize the 'overCls' one is dependent on the mouse). I think the 'orange way' isn't really proper (am I wrong?).

Thanks!

aw1zard2
2 Nov 2009, 2:43 PM
For the body of a panel

foo-red .x-panel-mc {
background-color:red;
}


Try this out.

Jaitsu
2 Nov 2009, 2:52 PM
don't you mean:



.foo-red {
background-color:red;
}

aw1zard2
2 Nov 2009, 2:55 PM
lol dang its been a long day time to go home...

GregT
4 Nov 2009, 9:05 AM
I can't believe I didn't try that, it's so obvious now. Thanks a lot.