extjs - 我必须做些什么才能获得边框布局以使 West 容器的视口(viewport)全高？

Question

我正在尝试使用 Border Extjs 4.2.1 中的布局，当我指定 North 时和 South它们扩展并填充视口(viewport)中的整个水平空间的容器，我希望它们允许 West面板改为全高。

这是我想要实现的一些简单的 ASCII 艺术版本。

-----------------
|W|____North____|
|E|    Center   |
|S|_____________|
|T|    South    |
-----------------

Answer 1

You can also use the weight property to give precedence to a region—for example, giving precedence to the West region over the North region. All these changes mean that you should not often need nesting with border layout, speeding up rendering of components that use that layout.

Ext.define('MyApp.view.MainViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    weight: -1,
                    width: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'north',
                    weight: -2,
                    height: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'south',
                    weight: -2,
                    height: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'east',
                    width: 150,
                    title: 'My Panel'
                },
                {
                    xtype: 'panel',
                    region: 'center',
                    title: 'My Panel'
                }
            ]
        });

        me.callParent(arguments);
    }

});