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

i have 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 this:

how can line in middle extend down bottom fills parent space vertically?

here's how tabpanel loaded 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 height element in dom absolute (19px), being set?

addendum

mcstretch, tried idea putting layout: 'fit' in tabs line still in 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'         }] }); 

corrected:

sorry edward incorrect, want layout: 'fit' within regioncontent panel. updated code changes below.

your initial idea of using layout: 'fit' correct, have in wrong location. want following:

var regioncontent = new ext.panel({    region     : 'center',    autoscroll : true,    layout     : 'fit', // added line    items      : [] });