View Full Version : Gridpanel & window resizing

27 Feb 2007, 9:33 AM
Ok, I've searched the forum over and over and can't seem to figure this out so I have to ask. Is the GridPanel not supposed to handle resizing of a grid when the browser is resized or a ContentPanel is collapsed and/or resized? I can't for the life of me get it to work.

I'm using the following to add the grid panel

layout.add('center', new Ext.GridPanel(myGrid.init(), {fitToFrame:true}));

and have a small class for my grid using Json data that returns the grid object after it's done setting up. I haven't been brave enough to try extending the grid class as in the props example yet. Is this maybe my problem?

var myGrid = {
init : function(){

// define the "Topic" record, mapping json data to record fields
var Topic = Ext.data.Record.create([
{name: 'id', mapping: 'Id'},
{name: 'name', mapping: 'Name'},
{name: 'description', mapping: 'Description'},

// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'ResultSet',
totalProperty: 'totalCount',
id: 'id'
}, Topic);

// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain
proxy: new Ext.data.HttpProxy({
url: 'http://fit/front_dev.php/workoutRoutine/getInfo'

// let it know about the reader
reader: reader,
// turn on remote sorting
remoteSort: false
ds.setDefaultSort('name', 'desc');

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'ResultSet', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Id",
dataIndex: 'id',
//renderer: renderTopic,
css: 'white-space:normal;'
header: "Name",
dataIndex: 'name',
//hidden: true
header: "Description",
dataIndex: 'description',
//align: 'right'

// by default columns are sortable
cm.defaultSortable = true;

// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
ds: ds,
cm: cm,
autoSizeColumns: true,
monitorWindowResize: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),

// render it

var gridFoot = grid.getView().getFooterPanel(true);

// trigger the data store load
//ds.load({params:{start:0, limit:25, forumId: 4}});
return grid;

While I'm sure my grid class isn't the best way to do it I'm still trying to learn.

Now my grid appears fine, autoscales to fit the current window size but if you resize the browser window smaller I get scroll bars and the columns don't resize. In .33 they resized if the browser or other content panels resized. Am I doing something wrong?

28 Feb 2007, 11:49 AM
I don't know if you've figured this out yet but if you look at the code for GridPanel (in ContentPanels.js) it sets the onWindowResize flag to false (which overrides yours).

BTW - don't be afraid to dig into the source -- thanks to Jack its actually readeable :D