PDA

View Full Version : Resizing Grid when resizing browser window



dyndan
23 Nov 2007, 6:35 AM
Hi there,

I'd like to program a layout that resizes dynamically when I resize the browser window. The lower 2/3 of the layout should display a GridPanel. The grid should resize automatically, column widths should adjust, too.

I somewhat messed around with Ext.Viewport with no succes at all. Unfortunately I did not find any suitable threads here as well.

Can anybody please give me a hint? An example of working code would be best. Perhaps you can point me to a working example on the internet?


Thanks a lot in advance,

dyndan

tryanDLS
23 Nov 2007, 8:06 AM
Look at the complex layout example. You could remove the east/west panels and put the grid in the center region.

dyndan
27 Nov 2007, 6:16 AM
Here comes my solution.



var vp=new Ext.Viewport({
monitorResize:true,
layout:'border',
items: [{
region: 'north',
height: 200,
bodyStyle:'background-color:transparent;border-style:none;padding:15px;',
minSize: 75,
maxSize: 250,
margins: '0 0 0 0',
layout:'fit',
items:[searchFormPanel]
},{
region:'center',
margins: '0 8 8 8',
layout:'fit',
items:[gridPanel]
}]
});
vp.render();

crpatrick
27 Nov 2007, 7:40 AM
What do you set your grid's autoHeight/autoWidth/width/height parameters to though to carry through with this solution? Are you auto-fitting the columns initially (I am actually setting widths, so I have auto-scrolls to scroll vertically/horiz. within the grid). How did you get your grid to initially fill the center region of the layout? I tried the solution, but without setting an initial height/width, I get one row that doesn't resize.

Thanks for the initial examples on this.

dyndan
28 Nov 2007, 1:44 AM
var colModel = new Ext.grid.ColumnModel([{
id: 'name',
header: "name",
dataIndex: 'name',
width: 120
},{
header: "title",
dataIndex: 'title',
width: 120
},{
header: "date",
dataIndex: 'date',
width: 40
}]);

var grid = new Ext.grid.GridPanel({
ds: dataStore,
cm: colModel,
title: "search result",
height:400,
width:800,
viewConfig: {forceFit:true}
});