how to change background color of all panels and c

Question

I am trying to change theme of sencha application, i want to know how to change background color of all panels and containers of sencha touch app like touchstyle application

I changed the title bar, tab panel color, but i don't know how to change the color of panel and container.

Answer 1

Two ways:

First(Directly change in panel):

new Ext.Panel({
    width:200,
    height:200,
    bodyStyle:{"background-color":"red"}, 
    renderTo: document.body
});

Second(Add CSS class and use it in Panel's 'bodyCssClass' property):

.x-panel-body{
background-color: blue}

Answer 2

Set the style config.

style: {
    background: 'red'
}

EDIT: You could set the cls config for your panel. E.g: cls: red-bg and in your stylesheet:

.red-bg .x-panel-body{
    background-color : red !important;
}