ExtJS: Autoscroll vertical FormPanels added to panel
- by Sarge
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'
});