Comment obtenir la hauteur de Ext.Panneau de remplissage de zone parent

J'ai le texte suivant 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'
        }]
});

qui ressemble à ceci:

Comment obtenir la hauteur de Ext.Panneau de remplissage de zone parent

Comment puis-je obtenir la ligne au milieu d'étendre vers le bas afin qu'elle remplisse son parent de l'espace à la verticale?

Voici 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 absolue (19px), où c'est que d'être ensemble?

Comment obtenir la hauteur de Ext.Panneau de remplissage de zone parent

Additif

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'
        }]
});
Désolé, j'ai mis à jour ma réponse avec le placement correct de la mise en page: "ajustement"

OriginalL'auteur Edward Tanguay | 2010-12-02

  1. 2

    Corrigé:

    Désolé Edward, j'ai été incorrect, vous voulez layout: 'fit' au sein de votre regionContent Panneau. La mise à jour des modifications de code sont ci-dessous.

    Votre idée initiale de l'aide layout: 'fit' est correct, mais vous l'avez dans l'mauvais emplacement. Vous souhaitez suivantes:

    var regionContent = new Ext.Panel({
   region     : 'center',
   autoScroll : true,
   layout     : 'fit', //added this line
   items      : []
});
    J'ai essayé comme dans votre code, mais il n'a pas aidé, je l'ai ajouté à tous mes onglets (code ci-dessus) et qu'il avait encore aucun effet.
    maintenant ça marche, merci

    OriginalL'auteur McStretch

  2. 2

    Dirait que vous êtes à l'intérieur d'une frontière de Disposition, comment définissez-vous le groupe d'experts que la frontière de disposition ? Le centre de la région de la frontière de disposition doit normalement remplir l'espace n'est pas resté par les autres régions. J'ai fait un exemple qui ressemble à votre disposition: http://jsbin.com/ikazo3/6/edit

    De la Frontière De Disposition documentation:

    • Tout conteneur à l'aide de la BorderLayout doit avoir un enfant avec
      région:'center'. L'enfant de l'élément dans le
      la région de centre sera toujours redimensionnée
      pour remplir le reste de l'espace non utilisé
      par les autres régions dans la mise en page.
    • Tous les éléments enfants avec une région de l'ouest ou de l'est doit avoir la largeur définie
      (un entier représentant le nombre de
      pixels que la région devrait prendre
      jusqu').
    • Tous les éléments enfants avec une région du nord ou du sud doit avoir de la hauteur
      défini.
    • Les régions d'un BorderLayout sont fixés au moment du rendu et par la suite,
      ses Composants ne peuvent pas être
      supprimés ou ajoutés. Pour ajouter/supprimer
      Les composants à l'intérieur d'un BorderLayout, ont
      leur enveloppé par un supplément de
      Conteneur qui est directement géré par la
      le BorderLayout. Si la région est de
      être pliable, le Conteneur utilisé
      directement par le gestionnaire BorderLayout
      devrait être un Panneau. Dans la suite de
      exemple d'un Conteneur (Ext.Panel) est
      ajouté à la région de l'ouest:
    +1 pour jsbin.com très utile
    J'ai finalement réalisé que c'était le border: false dans votre code qui fait la différence, merci!

    OriginalL'auteur SBUJOLD