Gridpanel & window resizing - Ext JS

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}),
	        enableColLock:false
	    });
	

	
	    // render it
	    grid.render();
	
	    var gridFoot = grid.getView().getFooterPanel(true);

	    // trigger the data store load
	    //ds.load({params:{start:0, limit:25, forumId: 4}});
		ds.load();
		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?

#2   02-28-2007, 01:49 PM

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