ExtJS 反转边框布局行为

Question

我有一个所有区域都在使用的边框布局。

如您所知，borderlayout 的正常行为是您为北部、南部、东部和西部区域定义初始大小，而中心获得剩余的可用空间。

在我的情况下，我需要反转它。我希望中心、西部和北部区域具有定义的大小，并希望使所有其他区域获得剩余的可用空间。如果我调整浏览器窗口的大小，则外部区域不得流过中心内容。

实际上，当没有为外部区域定义大小时，中心会获得所有空间，如果我调整它的大小，只有中心区域会缩小，并且其内容会剧烈变形或被其他区域覆盖。

有人知道怎么做吗？

Answer 1

嗯...我不知道这是不是你想要的。我使用 vbox 和 hbox 布局来创建可能更接近您描述的内容：

new Ext.Window({
    xtype: 'window',        
    layout: 'vbox',
    title: 'My Window',
    layoutConfig: {
        align : 'stretch',
        pack  : 'start'
    },
    items: [
    {
        xtype: 'panel',
        height: 100,                
        title: 'My Panel'
    }, {
        xtype: 'container',
        height: 150,
        layout: 'hbox',
        layoutConfig: {
            align : 'stretch',
            pack  : 'start'
        },
        items: [
            {
                xtype: 'panel',                        
                width: 300,
                title: 'My Panel'
            }, {
                xtype: 'panel',                    
                title: 'My Panel',
                flex: 1
            }
        ]
    }, {
        xtype: 'panel',                
        title: 'My Panel',
        flex: 1
    }]
});