Problème avec les mises en page

Question

Mon objectif est de faire quelque chose comme ceci:
Il y a une fenêtre avec une disposition de bordure. "Conteneur" et "centre" ont tous les deux une disposition "ajustée". Le "Panel" a la disposition "vbox" et a trois éléments. La grille a une ligne lorsqu'elle est chargée la première fois. Je veux que toute la grille prenne toute la hauteur et que les boutons soient en haut et en bas. Si je ne spécifie pas la hauteur de la grille ou "container" ou "Panel", je ne vois rien.
Comment puis-je le faire fonctionner?

Answer 1

Retirez les panneaux excédentaires et placez le panneau de grille lui-même dans la zone centrale de la disposition de bordure. Les "panneaux de boutons" doivent être des barres d'outils du panneau de quadrillage:

new Ext.Viewport({ 
    layout: 'border', 
    items: [ 
     { 
      region: 'center', 
      xtype: 'grid', 
      // ... other required grid properties, like 'store' and 'columns' 
      tbar: [ 
       // Top toolbar. Items are Ext.Button instances. 
       { 
        text: 'Button 1' 
       }, 
       { 
        text: 'Button 2' 
       } 
      ], 
      bbar: [ 
       // Bottom toolbar. Items are Ext.Button instances. 
       { 
        text: 'Button 3' 
       }, 
       { 
        text: 'Button 4' 
       } 
      ] 
     } 
    ] 
}); 

Answer 2

Le problème est que les grilles et les éléments voudront utiliser le moins d'espace vertical possible, sauf si vous définissez une hauteur fixe sur eux. La meilleure solution consiste à utiliser un style de hauteur minimale pour permettre à la grille de se développer aussi longtemps qu'elle le souhaite, mais toujours au moins une valeur minimale.

Answer 3

Il serait utile que vous ayez affiché du code. Si le panneau a une barre et un bbar et que seuls les éléments sont un panneau de grille, vous pouvez donner un flex au panneau de grille (je pense que n'importe quel nombre fonctionnera) et vous voulez probablement aligner layoutConfig: 'stretch'. Dans une mise en page vbox si le flex d'un enfant n'est pas fourni, il utilisera la hauteur d'origine de l'enfant.

Panel({ 
    layout: { 
       type: 'vbox', 
       align: 'stretch' 
    }, 
    tbar: {}, 
    bbar: {}, 
    items : [{ 
     xtype:'grid', 
     flex: 1 
    }] 
})