4

我有以下 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'
        }]
});
4

2 回答 2

2

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

从边框布局文档：

  • 任何使用 BorderLayout 的容器都必须有一个带有 region:'center' 的子项。中心区域中的子项将始终调整大小以填充布局中其他区域未使用的剩余空间。
  • 任何具有西部或东部区域的子项都必须定义宽度（一个整数，表示该区域应占用的像素数）。
  • 任何具有北部或南部区域的子项都必须定义高度。
  • BorderLayout 的区域在渲染时是固定的，此后，它的子组件可能不会被删除或添加。要在 BorderLayout 中添加/删除组件，请将它们包装在由 BorderLayout 直接管理的附加容器中。如果区域是可折叠的，BorderLayout管理器直接使用的Container应该是Panel。在以下示例中，将 Container（Ext.Panel）添加到 west 区域：
于 2010-12-02T15:12:54.920 回答
2

更正：

抱歉，爱德华我不正确，您希望layout: 'fit'在您的区域内容面板中。更新的代码更改如下。

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

var regionContent = new Ext.Panel({
   region     : 'center',
   autoScroll : true,
   layout     : 'fit', // added this line
   items      : []
});
于 2010-12-02T15:07:40.073 回答