Question

我原以为这会很简单。唉，似乎没有什么关于ExtJS很简单。

我需要拆分边框布局的center区域，并在页面调整大小时让顶部和底部panels填充center区域。

目前，我只能弄清楚如何设置面板的绝对尺寸。

生成的代码

/* 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）。这几乎不是你想要的应用UI。

您的中心区域应指定某种类型的布局。您可以通过给它layout: 'border'并给它一个中心和一个北/南面板来“拆分”它。但是，为了模仿“自动高度”类型的布局，你可能想要使用vbox布局（Ext 3.x）和两个子面板，每个面板占用50％（或者不管你想要这个空间。

如何在ExtJS中创建具有自动高度的拆分区域

1 个答案: