PDA

View Full Version : Resize Gridpanel to fit browser window when in container layout.



novahokie
21 Jun 2009, 8:07 PM
I have 2 panels in the viewport. A form panel with a text field and fieldset, and a grid panel. The behavior I am looking for is to have the grid panel appear as it would if it was a panel in a fit layout, Extended to the bottom of the browser window even with the grid is empty. Is this an easy thing to do? I tried to nest the grid in another panel with a fit layout but the result did not change.


var store = new Ext.data.JsonStore();

Ext.onReady(function() {
var viewport = new Ext.Viewport({
items: [{xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Search Term'
},{
xtype: 'fieldset',
title: 'Search Options',
collapsible: true,
collapsed: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Term'
}]
}]
},{
xtype: 'grid',
id: 'grid',
store: store,
columns: [{header: 'Name'},{header: 'Address'},{header: 'Phone'},{header: 'Email'}],
bbar: new Ext.PagingToolbar({
store: store
}),
viewConfig: {
autoFit: true,
autoFill: true
}
}]
});
});

http://img198.imageshack.us/img198/9539/26546273.png

makana
21 Jun 2009, 9:44 PM
use

layout: 'border'
for your viewport and define regions:
gridPanel:

region: 'center'
formPanel:

region: 'north'