Comment obtenir la hauteur de Ext.Panel pour remplir la zone parent

Question

je les Ext.TabPanel suivants:

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

qui ressemble à ceci:

Comment puis-je obtenir la ligne au milieu de descendre vers le bas de sorte qu'il remplit son espace parent verticalement?

Voilà comment le TabPanel est chargé dans 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); 

Je vois que la hauteur est de cet élément dans le dom est absolu (19px), où est que d'être réglé?

Addendum

McStretch, j'ai essayé votre idée en mettant layout: 'fit' dans les onglets eux-mêmes, mais la ligne est toujours au même endroit:

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

Correction:

Désolé Edward j'avais tort, vous voulez layout: 'fit' dans votre régionContenu Panneau. Les modifications de code mises à jour sont ci-dessous.

Votre idée initiale d'utiliser layout: 'fit' est correcte, mais vous l'avez au mauvais endroit. Vous voulez les éléments suivants:

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

Answer 2

On dirait que vous êtes dans une mise en page à la frontière, comment définissez-vous le panneau qui a mis la disposition de la frontière? La région centrale d'une disposition de frontière devrait normalement remplir l'espace non resté par les autres régions. Je l'ai fait un échantillon qui ressemble à votre mise en page: http://jsbin.com/ikazo3/6/edit

De la documentation Border Layout:

• Tout récipient en utilisant le BorderLayout doit avoir un élément enfant avec région: « centre ». L'élément enfant de la zone centrale sera toujours redimensionné pour remplir l'espace restant non utilisé par les autres régions de la mise en page.
• Tout élément enfant avec une région de l'ouest ou de l'est doit avoir une largeur définie (un nombre entier représentant le nombre de pixels que la région doit prendre ).
• Tous les éléments enfants ayant une région du nord ou du sud doivent avoir une hauteur définie.
• Les régions d'un BorderLayout sont fixées à l'heure du rendu et par la suite, ses composants enfants ne peuvent pas être supprimés ou ajoutés .Pour ajouter/supprimer Composants dans un BorderLayout, ont les enveloppés par un conteneur supplémentaire qui est directement géré par le BorderLayout. Si la région doit être pliable, le conteneur utilisé directement par le gestionnaire BorderLayout doit être un panneau. Dans le exemple suivant un conteneur (un Ext.Panel) est ajouté à la région ouest: