Style a panel using best practice workflow

[zennit]

Hi Guys,

I've got a panel with a few items added, buttons, form fields, html and images. Whats the best way to wrap these items in a container that I can style? With nested layouts or just adding a class to the panel?

Many thanks

[evant]

The latter is probably easiest, then you can target rules as appropriate.

[zennit]

Thanks, heres my code


appLogin = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'center'

},

cls: 'loginWrap',
items: [{
items: [{


html: '<img src="images/login.jpg" width="375" height="139" />'
},
{
xtype: 'fieldset',
items: [{
xtype: 'passwordfield',
name : 'password',
label: 'Pin*',
width: 300

}]

}, {
xtype: 'button',
text: 'Login',
width: 300,
handler: function(){
mainContainer.setCard(1);
}
}]
}]
});

I've added the class to the panel but because of the layout property i'm using this doesn't allow me to style the container that wraps the items without using

.loginWrap .x-panel {styles}
this doesn't really work well because the class .x-panel is added to multiple items, thanks again for your help