how to set background of panel

[xiuping]

i create a panel and set its style={background:'red'},but it can't work. am i wrong?how to set a panel's background

[scottmartin]

Please try the following:

// css
.myblue {
    background-color: #0000FF;
}

// js 
Ext.create('Ext.panel.Panel', {
    id: 'mypanel',
    title: 'Hello',
    width: 200,
    height: 100,
    bodyCls: 'myblue', // create time
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});

// runtime
// Ext.getCmp('mypanel').body.setStyle('background','red');

Regards,
Scott.

[xiuping]

Please try the following:

// css
.myblue {
    background-color: #0000FF;
}

// js 
Ext.create('Ext.panel.Panel', {
    id: 'mypanel',
    title: 'Hello',
    width: 200,
    height: 100,
    bodyCls: 'myblue', // create time
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});

// runtime
// Ext.getCmp('mypanel').body.setStyle('background','red');

Regards,
Scott.

still not work, and pop an error "Uncaught TypeError: Cannot call method 'setStyle' of undefined"

[scottmartin]

Is this error on my example, or your code? If it is your code, then see the following changes:

// changes:
// mypanel was id name, now is var for panel
// commented out bodyCls since you selected runtime approach

Do you have 'mypanel' defined as your panel name?

var mypanel = Ext.create('Ext.panel.Panel', {
    //id: 'mypanel', // use for quick access, not a good idea in production code
    title: 'Hello',
    width: 200,
    height: 100,
    // bodyCls: 'myblue', // define color at create time using CSS
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});

.. make sure your panel name is correct.
mypanel.body.setStyle('background','red');​

Regards,
Scott.

[xiuping]

Ext.define("H5D.view.setting",{
extend:"Ext.Panel",
xtype:"setPanel",
//layout:'card',
config:{
//style:{background:'red'},
//cls:'x-panel',
bodyCls:'myblue',
renderTo:Ext.getBody(),
width:260,
height:260,
model:true,
hideOnMaskTap:false,
hidden:true,
centered:true,
scrollable:false,
items:[
{
xtype:'button',
text:'red',
},{
xtype:'button',
text:'yellow'
},{
xtype:'button',
text:'blue',
}
]
}
})
first i define a panel,then i use it as follows:

var mypanel=Ext.Viewport.add({
xtype:'setPanel',
id:'myPanel'
})

i want to set its background ,so i write codes
Ext.getCmp("myPanel").body.setStyle({background:'red'});
then an error emerges: "Cannot call method 'setStyle' of undefined".
am i wrong?