Question

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

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

我试图添加包装：＆＃39; center＆＃39;到布局配置，但这无论如何都不起作用。

Answer 1

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

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

Answer 2

您必须覆盖布局类型并打包项目..检查此

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

水平和垂直居中的表单面板

2 个答案: