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

extJS 4 组件布局

extJS 4 Component Layout

layout

extjs4