Extjs 将窗体面板水平和垂直居中

我有一个由3部分组成的vbox布局。我需要在布局的第二部分水平和垂直居中放置一个表单面板

请看

代码：

---

我尝试将pack:'center'添加到布局配置中，但无论如何都不起作用

要对齐表单面板，请设置表单父容器的布局

width: '100%',
header: false,
height: 600,
layout: {
    type: 'vbox',
    align: 'center',
    pack: 'center'
},
items: [{
    xtype: 'form',
    ...

---

您必须覆盖布局类型，并在项目中进行打包。请选中此项

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

---

在帖子中，您告诉我您使用的是VBox布局。请问您为什么需要Ext.layout.container.HBox..？但是，两者都可以正常工作。

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