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:

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