ExtJS: FormPanels verticaux d'Autoscroll ajoutés au panneau

Question

J'écris une application dans laquelle j'ai un BorderLayout pour toute la page. Dans la partie sud, j'ai un panneau auquel j'ajoute FormPanels. Je voudrais être en mesure de faire défiler ce panneau afin que je puisse faire défiler les FormPanels.

Jusqu'à présent, rien de ce que j'ai trouvé à partir des recherches n'a aidé. Je ne comprends pas très bien ce que ExtJS nécessite en termes de combinaison de LayoutManagers, de réglage de la taille et de réglage de AutoScroll.

Tous les conseils partiels seront suivis avec reconnaissance.

Un extrait de code:

new Ext.Viewport({ 
    layout: "border", 
    items: [{ 
     region: "north", 
     contentEl: "title", 
     height: 50 
    }, { 
     region: "center", 
     id: "mappanel", 
     title: "Map", 
     xtype: "gx_mappanel", 
     map: map, 
     layers: [layer], 
     extent: extent, 
     split: true, 
     tbar: toolbarItems 
    }, { 
     region: "east", 
     title: "Details", 
     width: 300, 
     split: true, 
     id: "east-panel", 
     laout: 'fit' 
    }, { 
    region: "south", 
    id: "south-panel", 
    height: 200 
    }, { 
    region: "west", 
    id: "west-panel", 
    width: 300 
    }] 
}); 

matchedTrailJunctionsPanel = new Ext.Panel({ 
     title: "Matched Trail Junctions2", 
     id: "matched-trail-junctions", 
     autoScroll:true 
     //layout: 'anchor' 
    }); 

var southPanel = Ext.getCmp('south-panel'); 

southPanel.add(matchedTrailJunctionsPanel); 
southPanel.doLayout(); 

createTrailJunctionPanel = function(trailJunction) { 
var trailJunctionPanel = new Ext.form.FormPanel({ 
    labelWidth: 75, 
    width: 350, 
    defaultType: 'textfield', 
    items: [{ 
      fieldLabel: 'Junction Name', 
      name: 'junction-name' 
     }], 
    autoScroll:true, 
    //anchor: '100% 100%', 
    height: 100 
}); 
matchedTrailJunctionsPanel.add(trailJunctionPanel); 
if(trailJunction.publicTrailSegments.length == 0) { 
    matchedTrailJunctionsPanel.add(new Ext.form.Label({text: 'No public trails matched'}));  
} else { 
    var grid = new Ext.grid.GridPanel({ 
     store: mapMatchObjectStore, 
     columns: [ 
      {id:'publicTrailSegment',header: 'Trail', width: 160, sortable: true, dataIndex: 'publicTrailSegment'} 
     ], 
     stripeRows: true, 
     autoExpandColumn: 'publicTrailSegment', 
     height: 350, 
     width: 600, 
     title: 'Matched Trail Junctions'  
    }); 
    matchedTrailJunctionsPanel.add(grid); 
} 
matchedTrailJunctionsPanel.doLayout(); 
} 

Answer 1

Votre panneau sud est le conteneur principal pour vos composants, il devrait donc être autoScroll:true et vous devriez être en ajoutant à la fois votre forme et de la grille en elle. Vous ne pouvez pas vraiment ajouter une grille dans un FormPanel directement car ce n'est pas un champ de formulaire (vous devez l'encadrer comme un champ ou implémenter une partie de l'interface de Field). Il peut fonctionner avec le sud n'ayant aucune disposition (le navigateur devrait juste coller la grille directement après le formulaire) mais généralement il vaut mieux spécifier une disposition appropriée (vbox serait une bonne dans ce cas).

Answer 2

Le panneau contenant doit avoir le réglage de hauteur. Les panneaux contenus doivent avoir l'ensemble de hauteur ou autoHeight: true ensemble.