中心horizo​​ntaly和垂直的形式面板

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

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

Answer 1

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

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

Answer 2

你必须重写布局类型，并在项目包装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');