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