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

以下是我当前的布局：

​

​

我想让它填充整个Tab面板，并且每个部分的宽度和高度相等。

有什么想法吗？

谢谢

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