附录

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

看起来像这样：

alt text

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

以下是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），在哪里被设置？

alt text

附录

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

<强>修正：

对不起爱德华我错了，你想要 regionContent 面板中的layout: 'fit'。更新的代码更改如下。

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

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

Answer 2

看起来你在边框布局中，如何定义设置边框布局的面板？边界布局的中心区域通常应填充其他区域未留下的空间。我做了一个看起来像你的布局的样本：http://jsbin.com/ikazo3/6/edit

来自Border Layout文档：

使用BorderLayout的任何容器都必须包含子项   区域：“中心”。中的子项目   中心区域将始终调整大小   填补未使用的剩余空间   由其他地区的布局。

任何具有西部或东部区域的子项必须定义宽度   （表示数字的整数   该区域应采取的像素   向上）。

任何北部或南部地区的儿童用品必须有高度   定义

BorderLayout的区域在渲染时固定，之后，   它的子组件可能不是   删除或添加。添加/删除   BorderLayout中的组件有   他们被一个额外的包裹   由...直接管理的容器   BorderLayout。如果该地区是   是可折叠的，容器使用   直接由BorderLayout经理提供   应该是一个小组。在下面的   例如，一个Container（一个Ext.Panel）是   加入西部地区：

如何获取Ext.Panel的高度来填充父区域

附录

2 个答案: