extjs - 如何获取 Ext.Panel 的高度以填充父区域

Question

我有以下 Ext.TabPanel:

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    //layout: 'fit', // makes component disappear
    viewConfig: {
        forceFit:  true //has no effect
    },
    // height: auto, //error "auto isn't recognized"
    items:[{
            title: 'Section 1',
            html: 'test'
        },{
            title: 'Section 2',
            html: 'test'
        },{
            title: 'Section 3',
            html: 'test'
        }]
});

看起来像这样:

如何让中间的线向下延伸到底部，以便垂直填充其父空间？

以下是 TabPanel 加载到 regionContent 中的方式:

regionContent = new Ext.Panel({
    id: 'contentArea',
    region: 'center',
    autoScroll: true
});


function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

function replaceComponentContent(cmpParent, cmpContent) {
    clearExtjsComponent(cmpParent);
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}

replaceComponentContent(regionContent, modules_info_panel);

我看到dom中这个元素的高度是绝对的(19px)，在哪里设置的？

附录

McStretch，我尝试了你的想法，将 layout: 'fit' 放入选项卡本身，但该行仍然位于同一位置:

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    items:[{
            title: 'Section 1',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 2',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 3',
            layout: 'fit',
            html: 'test'
        }]
});

Answer 1

更正:

抱歉，Edward，我错了，您希望在 regionContent 面板中使用 layout: 'fit'。更新后的代码更改如下。

您最初使用 layout: 'fit' 的想法是正确的，但您将其放置在错误的位置。您需要以下内容:

var regionContent = new Ext.Panel({
   region     : 'center',
   autoScroll : true,
   layout     : 'fit', // added this line
   items      : []
});