ExtJS - поплавок 2 панели и центра им

Question

я застрял с чем-то, что я себе бы очень проста :)

Плавающий две панели рядом друг с другом и держать их в центре. Ближайшим, что я получил, является центрирование панелей, но одностороннее.

так:

  _ 
     |_| 
     _ 
     |_| 

Я пытаюсь получить

  _ _ 
     |_| |_| 

Это мой файл до сих пор

Ext.define("App.view.MyWindow", { 
extend:'Ext.panel.Panel', 
alias:'widget.mywindow', 
requires:[ 
     //this is just a simply panel with html:'abcde" 
     'App.view.Portal1' 

     ], 
items:[{ 
    xtype:'portal1', 
    height:400, 
    width:400, 
    style:{ 
     margin: '0 auto', 
    } 
},{ 
    xtype:'portal1', 
    height:400, 
    width:400, 
    style:{ 
     margin: '0 auto', 
    } 
}] 
}); 

Любые идеи? Все приветствуются :) ... заранее спасибо

Update: Ближайшим я пришел к «решению» заключается в следующем: (однако это требует установленной ширины)

Ext.define("App.view.MyWindow", { 
    extend:'Ext.panel.Panel', 
    alias:'widget.mywindow', 
    requires:[ 
      //this is just a simply panel with html:'abcde" with width & height 400 
      'App.view.Portal1' 

      ], 
      layout:'fit', 
    items:[{ 
     layout:{ 
      type:'vbox', 
      align:'center' 
     }, 
     items:[{ 
      layout:{ 
       type:'hbox', 
      }, 
      //Set width :(
      width:800, 
      items:[{ 
       xtype:'portal1', 
      },{ 
       xtype:'portal1', 
      }] 
     }] 

    }] 
}); 

Решение

Спасибо тем, кто прокомментировал. Вот рабочее решение. Не используйте layout:fit на оберточной панели

Ext.define("App.view.MyWindow", { 
    extend:'Ext.panel.Panel', 
    alias:'widget.mywindow', 
    requires:[ 
      //this is just a simply panel with html:'abcde" with width & height 400 
      'App.view.Portal1' 

      ], 
    style:{ 
     textAlign:'center' 
    }, 
    items:[{ 
     xtype:'portal1', 
     style:{ 
      display:'inline-block' 
     } 
    },{ 
     xtype:'portal1', 
     style:{ 
      display:'inline-block' 
     } 
    }] 
}); 

Answer 1

КАС единственное решение, так как я не знаю, ExtJS:

Дают каждой панели соответствующие горизонтальные поля, чтобы они не работают вместе. Установите их ширину и высоту как обычно. Затем установите display: inline на панели. Наконец, установите для содержащего элемента значение text-align: center. Для этого вам может потребоваться ввести новый контейнерный элемент.

Answer 2

Give 'MyWindow' макет HBox. Элементы, которые содержатся внутри, будут выложены горизонтально.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox