javascript - ExtJS 反转边框布局行为

Question

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

正如您所知，边框布局的正常行为是定义北、南、东、西区域的初始尺寸，中心获得剩余的可用空间。

就我而言，我需要反转它。我希望中心、西部和北部区域有一个确定的大小，并希望所有其他区域都能获得剩余的可用空间。如果我调整浏览器窗口的大小，外部区域不得覆盖中心内容。

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

有人知道怎么做吗？

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