我需要做些什么才能使边框布局使West容器的视口全高?

时间:2013-07-10 04:47:40

标签: extjs extjs4.2 border-layout

我试图在Extjs 4.2.1中使用Border布局,当我指定它们展开的NorthSouth个容器并填充视口中的整个水平空间时,我想要它们允许West面板成为全高度。

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

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

1 个答案:

答案 0 :(得分:7)

  

您还可以使用weight属性赋予a优先权   区域 - 例如,优先考虑西部地区   北部地区。所有这些变化意味着您不应经常需要   嵌套边框布局,加快组件的渲染速度   使用那种布局。

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

});