Question

I have the following 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'
        }]
});

which looks like this:

How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?

Here’s how the TabPanel is loaded into 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);

I see that the height is for this element in the dom is absolute (19px), where is that being set?

Addendum

McStretch, I tried your idea by putting layout: 'fit' in the tabs themselves but the line still is in the same place:

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

Corrected:

Sorry Edward I was incorrect, you want layout: 'fit' within your regionContent Panel. The updated code changes are below.

Your initial idea of using layout: 'fit' is correct, but you have it in the wrong location. You want the following:

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