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

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: