Центр горизонтальный и вертикальный панель формы

Question

У меня есть макет 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' 
       }] 
});   

Я пытался добавить пакет: «центр» в макете конфигурации, но это не работает в любом случае.

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