javascript - ExtJS 面板布局 : how to correctly layout Panels

Question

我正在尝试渲染 Panel占据整个水平空间的 A。然后我尝试在面板 A 下方渲染两个面板 B 和 C，它们都占据 50% 的水平空间。

因此，我要实现的是这样的结构:

-------------
|     A     |
-------------
|  B  |  C  |
-------------

但是如图所示fiddle我正在实现以下面板渲染:

-------------
|     A     |
-------------
|     B     |
-------------
|     C     |
-------------

请随时 fork fiddle如上所述实现我需要的对齐。

Answer 1

有这样的 View 怎么样:

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