我需要做什么才能让Border Layout让West容器的视口全高？

Question

我想使用Border的ExtJS的4.2.1,布局时,我指定North和South他们展开容器,并在视口中充满整个水平空间,我希望他们能够让West面板是全高度来代替.

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

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

Answer 1

您还可以使用权重属性为区域赋予优先权 - 例如,优先考虑北部地区的西部地区.所有这些更改意味着您不应经常需要使用边框布局进行嵌套,从而加快使用该布局的组件的渲染速度.

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

});