Как создать разделенную область с автогайтами в ExtJS

Question

Я бы подумал, что это будет довольно просто. увы, в ExtJS, похоже, нет ничего простого.

Мне нужно разделить область center макета границы, и верхняя и нижняя области panels заполняют область center при изменении размера страницы.

В нынешнем виде я могу только выяснить, как установить абсолютные размеры для панелей.

Вот код, сгенерированный с помощью ExtJS Gui Builder

/* This file is created or modified with 
 * Ext.ux.guid.plugin.GuiDesigner (v2.1.0) 
 */
{
    layout: "border",
    items: [{
        region: "center",
        title: "map",
        items: [{
            xtype: "panel",
            title: "Panel",
            autoHeight: true,
            split: true,
            height: 100
        }, {
            xtype: "panel",
            title: "Panel",
            autoHeight: true,
            split: true,
            height: 300
        }]
    }, {
        region: "north",
        split: true,
        height: 100
    }, {
        region: "west",
        width: 300,
        split: true,
        collapsible: true,
        title: "Gazetter Explorer"
    }]
}

Answer 1

Во-первых, autoheight означает, что контейнер будет свернут до размера содержимого, а его размеры будут управляться браузером (а не Ext). Это почти никогда не то, что вы хотите в пользовательском интерфейсе приложения.

В вашем центральном регионе должен быть указан тип макета. Вы можете «разделить» его, указав layout: 'border' и указав центр и север / юг. Тем не менее, чтобы имитировать тип макета с «автоматической высотой», вы, вероятно, захотите использовать макет vbox (Ext 3.x) с двумя дочерними панелями, каждая из которых растягивается до 50% (или все, что вы хотите) пространства.