PDA

View Full Version : Prevent toolbars from scrolling



donnhann
26 Jan 2011, 11:52 AM
I have a top toolbar and bottom toolbar, each consisting of one or more toolbars, and a bunch of form items in a FormPanel. The FormPanel is in a region of a viewport. The entire form panel scrolls including the top and bottom toolbars. I would like the top and bottom toolbars to remain intact, and just have the MANY FORM ITEMS scroll. I will spare you the many different configurations I have tried and just ask for suggestions. Thanks!



var formPanel = new Ext.form.FormPanel({
autoHeight: true,
frame:false,
id: 'FormPanelId',
formId: 'FormId',
bodyBorder: true,
header: false,
bodyStyle:'padding:0px 5px 5px 5px', // top, right, bottom, left
width: '620',
height: '100%',
tbar : {
xtype: 'container',
layout: 'anchor',
hideBorders: true,
height: 65,
items : [{
xtype: 'toolbar',
items : [{ }]
},{
xtype: 'toolbar',
items : [{ }]
},{
xtype: 'toolbar',
items : [{ }]
}]
},
bbar : {
xtype: 'toolbar',
layout: 'anchor',
hideBorders: true,
height: 20,
items : [{
xtype: 'toolbar',
items : [{ }]
}]
},
items: [{ MANY FORM ITEMS }]
});

httpdotcom
26 Jan 2011, 1:37 PM
Make the toolbars components of the viewport region (ie. another panel) and the formpanel a scrollable "item" of that panel.
sudo code-

viewport
- region
- panel( {
- tbar()
- items: [
- formpanel
]
- bbar()
} )