Comment automatique de la hauteur de la fenêtre d'affichage de panneaux enfants?

Je travaille dans ExtJS4. Je suis coincé à un point où je veux automatique de la hauteur de la région de l'est de la frontière de disposition. En fait, mon exigence est d'augmenter automatiquement la hauteur de n'importe quelle région sur la base des enfant elemtents contenu à l'intérieur. J'ai essayé beaucoup de choses mais je n'ai pas de solution pour elle. Merci de me donner quelques suggestions.

Dans mon code je suis juste tester un code simple contenant 5 panneaux dans la région de l'est, sur ces quatre panneaux sont affichés. Le cinquième panneau n'est pas affiché, comment puis-je le rendre visible? Je suis juste en utilisant un exemple de code de référence.

Voici ma fenêtre de code :

Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
//       closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},//end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},//end of region center
{
region:'east',
id:'eastId',
//margins:'0 5 0 5',
flex:.3,
//layout:'accordion',
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu   //used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port

Et voici ma capture d'écran de sortie :
Comment automatique de la hauteur de la fenêtre d'affichage de panneaux enfants?

Composant enfant panel5 n'est pas affiché. Comment puis-je le rendre visible?
Comment puis-je afficher tous les panneaux à cette exigence? Je veux faire de l'auto augmenter la taille de la région de l'est basé sur le contenu du panneau.
Merci de me donner quelques suggestions.

lire sur vbox mise en page
J'ai lu et mettre en œuvre, mais toujours pas obtenir le problème résolu.
voir ma réponse. thx

OriginalL'auteur Pravin Mane | 2013-03-23

  1. 5

    Pour obtenir un panneau de autoresize en fonction de son contenu

    Vous devez définir son flex à 0, et assurez-vous que d'autres panneaux ont flex qui est différent de 0. Ainsi, dans le code suivant, le pied de page a flex: 0 et la région de centre a flex: 1; le pied de page sera donc de les redimensionner en fonction de son contenu. Voici un travail JsFiddle:

    Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Footer',
region:'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0, //Notice this.
id: 'footer',
layout: {
type: 'vbox',
align : 'stretch',
pack  : 'start',
},
items:[{
title: '1',
height: 50
},{
title: '2',
height: 50                                   
}]
},{
title: 'Center Region',
flex: 1, //Notice this.
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Ext.getCmp('footer').add({
title: '3',
height: 50                        
});

    Pour obtenir un panneau de taille fixe à défilement en se basant sur son contenu

    Simplement ajouter autoScroll: true sur les conteneurs (la région de panneaux).

    Voici quelques code du travail, que vous pouvez voir en action sur cette JsFiddle:

    Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'West Region',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
id: 'west-region-container',
//Notice the next line
autoScroll: true,
layout: {
type: 'vbox',
align : 'stretch',
pack  : 'start',
},
items:[{
title: '1',
height: 100
},{
title: '2',
height: 100            
},{
title: '3',
height: 100                        
}]
},{
title: 'Center Region',
region: 'center', 
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
    grâce Izhaki. Elle fonctionne.Mais mon exigence est que je ne veux pas de barre de défilement à l'est de la région.Je veux faire de mon pied de page flexible de telle façon que si la longueur de mon enfant composant augmente, le pied de page doit également obtenir l'auto étendues en direction vers le bas et vice versa..merci de me donner la solution
    J'ai mis à jour ma réponse.
    ouais!! Izhaki cela fonctionne pour moi.Mais il est de taille variant entre la largeur et la hauteur c'est à dire 1000*1000.Il n'augmentant pas plus que ça.Mais je veux augmenter sa hauteur dans la direction vers le bas et d'afficher tout le contenu à afficher.en fait, je veux faire de l'infini défilement dans la région de centre et pied de page se déplace dans la direction vers le bas basé sur les régions de centre de composant enfant.Je veux de sortie comme ce lien --> ext4all.com/post/tag/extjs-4-1-0 .... veuillez donner quelques conseils..
    Essayé mais pas fonctionné. Vous s'il vous plaît m'aider stackoverflow.com/questions/26137062/...

    OriginalL'auteur Izhaki

  2. 0

    Vous êtes à la recherche pour flex paramètre de configuration:

        items:[{
title: 'panel1',
flex: .3
},{
title: 'panel2',
flex: .3
},{
title: 'panel3',
flex: .4
}]
    merci peter.Mais j'ai déjà utilisé flex mais il n'est pas satisfait de ma condition.Je veux faire le pied de page flexible(à la hausse ou à la baisse) basé sur le composant enfant.
    Je réponds à votre "Comment puis-je faire de l'enfant composant panel5 affiche?" Peut-être, nous avons finalement réussi à le but final? Désolé, mais votre question demande rien à ce sujet. Pouvez-vous faire à votre question est-elle claire?

    OriginalL'auteur Peter Ivan

  3. 0

    cela fonctionne (pour votre premier problème): au moins

        Ext.define('MyApp.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'center'
},
{
xtype: 'panel',
width: 150,
title: 'My Panel',
region: 'west'
},
{
xtype: 'container',
width: 150,
layout: {
align: 'stretch',
type: 'vbox'
},
region: 'east',
items: [
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'north'
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'south'
}
]
});
me.callParent(arguments);
}
});

    Comment automatique de la hauteur de la fenêtre d'affichage de panneaux enfants?

    OriginalL'auteur Neil McGuigan