Center horizontally and vertically the form panel - extjs

Question

I have a vbox layout consisting of 3 parts. I need to center a form panel horizontally and vertically in the second part of the layout.
Please see the demo
Code:
Ext.define('Test.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border',
'Ext.layout.container.HBox'
],
autoScroll: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
width: '100%',
html:'header'
},
{
margin: '0 100 0 100',
width: '100%',
header: false,
height: 600,
items:[{
xtype:'form',
frame: true,
bodyPadding: 10,
width: 300,
height: 100,
defaultType: 'textfield',
items: [{
fieldLabel: 'User',
name: 'user'
}, {
fieldLabel: 'Pass',
name: 'pass',
inputType: 'password'
}]
}]
},
{
html: 'XXXX'
}]
});
I've tried to add pack: 'center' to the layout config, but that doesn't work anyway.

Answer 1

To align form panel, set the layout of form's parent container..
width: '100%',
header: false,
height: 600,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'form',
...

Answer 2

You have to override the layout type and pack in the items also..check this
Ext.define('Test.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.layout.container.Border',
'Ext.layout.container.VBox'
],
autoScroll: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
width: '100%',
html:'header'
},
{
margin: '0 100 0 100',
//bodyStyle: { background: '#DFE8F6' },
width: '100%',
layout:{
type: 'vbox',
align: 'center',
pack: 'center',
},
header: false,
height: 300,
items:[{
xtype:'form',
frame: true,
bodyPadding: 10,
width: 300,
height: 100,
defaultType: 'textfield',
items: [{
fieldLabel: 'User ID',
name: 'user'
}, {
fieldLabel: 'Password',
name: 'pass',
inputType: 'password'
}]
}]
//html:'body'
},
{
html: 'XXXX'
}]
});
Ext.create('Test.Viewport');