Comment créer une région de split avec des autoheights dans ExtJS

Question

J'aurais pensé que ce serait assez simple ... hélas, il semble que rien sur ExtJS est simple.

J'ai besoin de diviser la zone 'centre' d'une disposition de bordure et de faire en sorte que les panneaux supérieur et inférieur remplissent la zone centrale lorsque la page est redimensionnée. En l'état, je ne peux que comprendre comment régler les tailles absolues pour les panneaux.

Voici le code généré en utilisant ExtJS Gui Builder

/* This file is created or modified with 
* Ext.ux.guid.plugin.GuiDesigner (v2.1.0) 
*/ 
{ 
    layout : "border", 
    items : [ { 
     region : "center", 
     title : "map", 
     items : [  { 
      xtype : "panel", 
      title : "Panel", 
      autoHeight : true, 
      split : true, 
      height : 100 
     },  { 
      xtype : "panel", 
      title : "Panel", 
      autoHeight : true, 
      split : true, 
      height : 300 
     }] 
    }, { 
     region : "north", 
     split : true, 
     height : 100 
    }, { 
     region : "west", 
     width : 300, 
     split : true, 
     collapsible : true, 
     title : "Gazetter Explorer" 
    }] 
} 

Answer 1

Tout d'abord, AutoHeight signifie que le conteneur se réduira à la taille du contenu et ses dimensions seront gérées par le navigateur (et non par poste). Ce n'est presque jamais ce que vous voulez dans une interface utilisateur d'application.

Votre région centrale doit avoir un type de disposition spécifié. Vous pouvez le "diviser" en lui donnant layout: 'border' et en lui donnant un centre et un panneau nord/sud. Cependant, pour imiter une mise en page de type "hauteur automatique", vous voudrez probablement utiliser une mise en page vbox (Ext 3.x) avec deux panneaux enfant qui s'étendent chacun pour prendre 50% (ou ce que vous voulez) de la espace.