PDA

View Full Version : Form in border layout is blue around buttons, in other layouts its white



forumuser1080
11 May 2011, 5:35 PM
I have a form in a border layout and the buttons section in the footer has a blue background. However the same form in a different layout (ie card layout) has a white background around the buttons.

I would like that same blue background around the buttons in the form within the card layout but I am not sure how. I have looked at both in firebug and I cannot determine where the styles differ.

Here is the example code:


Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
items : [{
xtype: 'form',
region: 'center',
title: 'Form Panel Test',
items: [{
xtype: 'textfield',
fieldLabel: 'field 1'
},{
xtype: 'textfield',
fieldLabel: 'field 2'
}],
buttons: [{
xtype: 'button',
text: 'Save'
},{
xtype: 'button',
text: 'Cancel'
}]
},{
layout: 'card',
activeItem: 0,
region: 'west',
width: 350,
items: [{
xtype: 'form',
region: 'center',
title: 'Form Panel Test',
items: [{
xtype: 'textfield',
fieldLabel: 'field 1'
},{
xtype: 'textfield',
fieldLabel: 'field 2'
}],
buttons: [{
xtype: 'button',
text: 'Save'
},{
xtype: 'button',
text: 'Cancel'
}]
}]
}]
})
});




Screen shoot is attached

shuixiya1999
11 May 2011, 9:43 PM
It's totally different in wrapping the two elements.

You can see that the right header is higher 2px than the left.

shuixiya1999
11 May 2011, 9:49 PM
try it

add this to the card-layout

footerStyle:'background-color: #DFE8F6;'

forumuser1080
12 May 2011, 11:32 AM
Yeah that worked, but I am wondering why I need to do it that way. I.E. why does border layout have a different footer background from card layout? Am I doing something wrong. Seems inconsistent to have different look and feel in the footer/header for different layouts.