ExtJS面板佈局：如何正確佈局面板

Question

我想呈現一個採用整個水平空間的Panel。然後，我試圖在面板A下面渲染兩個面板B和C，都佔據了水平面的50％。

因此，我要實現的是這樣的結構：

------------- 
|  A  | 
------------- 
| B | C | 
------------- 

但如本fiddle我實現以下面板渲染：

------------- 
|  A  | 
------------- 
|  B  | 
------------- 
|  C  | 
------------- 

請隨時到餐桌的fiddle如上所述實現我需要的對齊。

Answer 1

如何有這樣的觀點：

Ext.define('MyApp.view.MyContainer', { 
    extend: 'Ext.container.Container', 
    padding: 10, 
    layout: { 
     align: 'stretch', 
     pack: 'center', 
     type: 'vbox' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'panel', 
        flex: 1, 
        height: 150, 
        title: 'A' 
       }, 
       { 
        xtype: 'container', 
        flex: 1, 
        height: 150, 
        layout: { 
         padding: '10 0 10 0', 
         align: 'stretch', 
         type: 'hbox' 
        }, 
        items: [ 
         { 
          xtype: 'panel', 
          flex: 1, 
          width: 150, 
          title: 'B' 
         }, 
         { 
          xtype: 'panel', 
          flex: 1, 
          width: 150, 
          title: 'C' 
         } 
        ] 
       } 
      ] 
     }); 
     me.callParent(arguments); 
    } 
});