EXTJS - 浮動2個面板和中間他們

Question

我堅持的東西，我想象會是安靜的簡單:)

浮動彼此相鄰的兩個面板，保證它們的中心。 我得到的最接近的是中心的面板，但互相ontop。

像這樣：

  _ 
     |_| 
     _ 
     |_| 

我試圖讓

  _ _ 
     |_| |_| 

這是我的文件至今

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

任何想法？歡迎各界人士:) ...在此先感謝

更新： 最接近我已經到了「解決方案」如下：（但它需要一組寬度）

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

一個CSS唯一的解決辦法，因爲我不知道ExtJS的：

給每個面板上的相應水平的利潤率，使他們不在一起運行。正常設置它們的寬度和高度。然後在面板上設置display: inline。最後，將包含元素設置爲text-align: center。您可能需要爲此目的引入一個新的容器元素。

Answer 2

給'myWindow'一個hbox佈局。包含在內部的項目將水平放置。

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