View Full Version : Style a panel using best practice workflow

20 Sep 2010, 6:23 AM
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

20 Sep 2010, 6:28 AM
The latter is probably easiest, then you can target rules as appropriate.

20 Sep 2010, 6:50 AM
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(){

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