ExtJS: Autoscroll vertical FormPanels added to panel

Question

Hi All, I'm writing an app where I have a BorderLayout for the entire page. In the south part I have a Panel to which I add FormPanels. I would like to be able to scroll that Panel so I can scroll through the FormPanels.

So far, nothing I've found from searches has helped. I don't quite understand what ExtJS requires in terms of the combination of LayoutManagers, setting the size and setting AutoScroll.

Any partial tips will be gratefully followed up.

A code snippet:

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

Your south panel is the main container for your components, so it should be autoScroll:true and you should be adding both your form and grid into it. You can't really add a grid into a FormPanel directly as it's not a form field (you'd have to wrap it as a Field or implement some of Field's interface). It may work with south having no layout (the browser should just stick the grid directly after the form) but generally it's better to specify an appropriate layout (vbox would be a good one in this case).

Answer 2

The containing panel must have the height set. The contained panels must either have the height set or autoHeight: true set.