title: How to get height of Ext.Panel to fill parent area
body: <p>I have the following Ext.TabPanel:</p>
  
  <pre><code>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'
          }]
  });
  </code></pre>
  
  <p>which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uocD2.png" alt="alt text"></p>
  
  <p><strong>How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?</strong></p>
  
  <p>Here's how the TabPanel is loaded into <code>regionContent</code>:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>I see that the height is for this element in the dom is absolute (19px), where is that being set?</p>
  
  <p><img src="https://i.stack.imgur.com/PDPKD.png" alt="alt text"></p>
  
  <h1>Addendum</h1>
  
  <p>McStretch, I tried your idea by putting <code>layout: 'fit'</code> in the tabs themselves but the line still is in the same place:</p>
  
  <pre><code>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'
          }]
  });
  </code></pre>