EXT Js question

Question

I currently have two panels within another large panel. The left panel is for navigation and the right is for content. I'm trying to modify the content panel background color so I have made an event that triggers on expandnode, and this is where I am stuck.

My right panel ID is #panneau-affichage and I'm trying to modify the background-color attribute of the class x-panel-body that lives within. Using:

Ext.get('panneau-affichage').setBodyStyle('backgroundColor : #dddddd');

Firebug states that there is no such function, and with:

Ext.get('panneau-affichage').applyStyle('backgroundColor: #dddddd);

This does the job for the div but is overridden by x-panel-body.

Answer 1

Why don't you just set it via CSS? Use Firebug to drill down to panel's body div element. Write your own override using your panel's id. This way it will work without Javascript, and always and even before you start running your scripts.

Using CSS class names
If you're not looking into permanent changes and settings it would still be much better to define a CSS class and add/remove the class to panel itself and set panel's body style via CSS. It would be centralised and much better customizable. And it would keep style away from your code, which you should always thy to achieve. Separate code from visuals.

Answer 2

You are using Ext.get(). This returns an Ext.Element object, which doesn't have the setBodyStyle() function. The Ext.Element is not a HTML node, but you can see it like a wrapper for it.

The correct function for you to use would be setStyle( String/Object property, [String value] ). If I am not entirely mistaken, for your need this should work:

Ext.get('panneau-affichage').setStyle('backgroundColor','#dddddd');

Answer 3

Solution for this:

Ext.getCmp('panel-id').body.setStyle('background','lightblue');

Thanks, Sridhar