ExtJSには4コンポーネントのレイアウト

Question

私はExtJSの中で、このようなレイアウトを達成するための最良の方法だろうと思いまして：

私はそれぞれのボックスに置くしたい4つの異なる要素を持っていますが、私がそれをどうやってできるかを正確に把握することができない。私が取り組んできている。ここ

は、いくつかのコードの抜粋である：ここで

Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', { 
    extend: 'Ext.container.Container', 

    height: '100%', 
    width: '100%', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [{ 
      flex: 1, 
      items: [ 
       Ext.create('/../../../chefRequiredCookbooksGridPanel'), 
       Ext.create('/../../../chefRoleSetupFormPanel') 
      ] 
    }, { 
      flex: 1, 
      items: [ 
       Ext.create('/../../../chefOptionalCookbooksGridPanel'), 
       Ext.create('/../../../chefAttributeGridContainer') 
      ] 
    }] 
}); 

は私の現在のレイアウトがに出てくるものです：

私はそれをみたいですタブパネル全体を塗りつぶし、幅と高さをセクションごとに等しくします。

アイデア？

おかげ

Answer 1

あなたは内部の容器の項目（A、B、C、D）は、カスタムアイテムと交換することができる以下のスニペットを、試すことができます。

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [{ 
       xtype: 'container', 
       layout: { 
        type: 'hbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        xtype: 'container', 
        flex: 1, 
        layout: { 
         type: 'vbox', 
         align: 'stretch' 
        }, 
        border: 1, 
        items: [ 
         { 
          xtype: 'container', 
          html: 'Cell A content', 
          flex: 1 
         },{ 
          xtype: 'container', 
          html: 'Cell B content', 
          flex: 1 
         } 
        ] 
       }, { 
         xtype: 'container', 
         flex: 1, 
         layout: { 
          type: 'vbox', 
          align: 'stretch' 
         }, 
         items: [ 
         { 
          xtype: 'container', 
          html: 'Cell C content', 
          flex: 1 
         },{ 
          xtype: 'container', 
          html: 'Cell D content', 
          flex: 1 
         } 
         ] 
       }] 
      }] 
     }); 
    } 
});