ExtJS 4 Компонент Layout

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