Not showing the form corretly in ExtJs - forms

Question

I've created a form using ExtJs library. Here is my code;
form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Vehicle Registration Number',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Device ID',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Default Rep',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Driver',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 1',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 2',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
win1.hide();
}
} ]
});
win1 = new Ext.Window({
title: 'Vehicle Assigning',
layout: 'fit',
autoScroll: true,
y: 120,
width: 600,
height: 500,
modal: true,
plain:true,
bodyStyle:'padding:8px;',
buttonAlign:'center',
closeAction: 'hide',
floating: true,
closable : true,
items: [form1]
});
win1.show();
It pop ups a new window successfully, but there is a problem. All the text fields(Vehicle Registration Number, Device ID, and so on) are not showing correctly. The form looks like following:
Why these text fields are not showing correctly ? Another thing that I want to know is how should I center the whole form within the window. I've tried following code but no luck.
layout: {
pack: 'center',
type: 'hbox'
},
Any suggestions are appreciated.
Thank you

Answer 1

1) Looks like your border is overlapping your labels. You can add some padding to the label if you want to move them over slightly. (see below)
2) You have to set the layout on the form, not on the window, if you want the form's contents to be centered.
The code below applies a label width of 200 to each label, adds 25px of padding to the left hand side, and centers the labels and fields in the form.
var form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
labelWidth: 200,
padding: '0 0 0 25'
},
...