How to get height of Ext.Panel to fill parent area

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

Answer 2

Looks like you are within a border Layout, how do you define the panel that set the border layout ? The center region of a border layout should normally fill the space not remained by the other regions. I did a sample that looks like your layout: http://jsbin.com/ikazo3/6/edit

From the Border Layout documentation:

• Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
• Any child items with a region of west or east must have width defined (an integer representing the number of pixels that the region should take up).
• Any child items with a region of north or south must have height defined.
• The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region: