Center horizontally and vertically the form panel

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

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');             

Answer 2

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',
    ...