javascript - ExtJS 面板布局：如何正确布局面板

Question

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

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

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

但如this fiddle所示，我正在实现以下面板渲染：

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

请随意分叉小提琴以实现我需要的对齐，如上所述。

Answer 1

有这样的观点怎么样：

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