中心水平和垂直方向的形式面板

Posted 2021-04-12

我有一个VBOX布局由3个部分组成。我需要在布局的第二部分水平和垂直居中形式面板。

请参阅demo

码：

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

我试着添加软件包：“中心”的布局配置，但是，这并不反正工作。

答案

要对齐表格面板，设置窗体的父容器的布局..

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

另一答案

你必须覆盖的项目also..check这种布局类型和包

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