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