setHeight doesn't work in IE7

[rswafford]

I am trying to use setHeight and setWidth to resize a grid when the user resizes their web browser. I've got them inside a handler for the onWindowResize event, and it works beautifully in Firefox. When I test it in IE7, the grid will only get taller. The setWidth works fine, but setHeight only seems to affect the height of the grid container when it is larger than it was previously.

Can anyone offer any insight to this?

Here is the grid definition:


var projectGrid = {
init: function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'projects.php?Action=GetListData'
}),

reader: new Ext.data.JsonReader({
root: 'projects',
totalProperty: 'totalProjects',
id: 'project_id'
}, [
{name: 'project_name', mapping: 'name'},
{name: 'description', mapping: 'description'},
{name: 'company', mapping: 'company'},
{name: 'created_by', mapping: 'creator'},
{name: 'created_on', mapping: 'created', type: 'date', dateFormat:'timestamp'},
{name: 'project_status', mapping: 'status'}
]),

remoteSort: true
});

ds.setDefaultSort('project_name', 'asc');

function renderProject(value, p, record){
return String.format('<b>{0}</b><br />{1}', value, record.data['description']);
}
function renderProjectPlain(value){
return String.format('<b><i>{0}</i></b>', value);
}
function renderCreated(value, p, record){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), record.data['created_by']);
}
function renderCreatedPlain(value){
return value.dateFormat('M j, Y, g:i a');
}

var cm = new Ext.grid.ColumnModel([{
id: 'project_name',
header: 'Project',
dataIndex: 'project_name',
width: 420,
renderer: renderProject,
css: 'white-space:normal;'
},{
header: 'Creator',
dataIndex: 'created_by',
width: 100,
hidden: true
},{
header: 'Status',
dataIndex: 'project_status',
width: 100,
align: 'center'
},{
id: 'project_created',
header: 'Created',
dataIndex: 'created_on',
width: 150,
renderer: renderCreated
}]);

cm.defaultSortable = true;

var grid = new Ext.grid.Grid('project-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask:true
});

grid.render();

grid.on('rowdblclick', rowDblClicked);

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

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying projects {0} - {1} of {2}',
emptyMsg: 'No projects to display'
});

paging.add('-', {
pressed: true,
enableToggle: true,
text: 'Detailed View',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
});

ds.load({params:{start:0, limit:25}});

var proj = Ext.get("project-grid-container");

proj.setHeight(Ext.get("bdy").getHeight() - 110);
proj.setWidth(Ext.get("bdy").getWidth());

function toggleDetails(btn, pressed){
cm.getColumnById('project_name').renderer = pressed ? renderProject : renderProjectPlain;
cm.getColumnById('project_created').renderer = pressed ? renderCreated : renderCreatedPlain;
grid.getView().refresh();
}

function rowDblClicked(grid, rowIdx, evt)
{
alert('opening item ' + rowIdx);
var rowRecord = grid.getDataSource().getAt(rowIdx);

alert('item id ' + rowRecord.id);
}
},

resize : function(x, y){
var p = Ext.get("project-grid-container");
p.setSize(x,y-110);
}
}

Ext.EventManager.onDocumentReady(projectGrid.init, projectGrid, true);
Ext.EventManager.onWindowResize(projectGrid.resize, projectGrid, true);

[jsakalos]

Is there any particular reason for not using GridPanel and autoSize method? I think they assist resizing a lot.

[rswafford]

No, no reason...other than I'm new to the framework and didn't know about them...I'll take a look and see where that gets me.

[jsakalos]

Ok, try GridPanel, maybe put it in layout and if troubles post a question.

[rswafford]

Beautiful...it works great! Next question.. can I have the ContentPanel tabs on the top of the panel, or do they have to be on the bottom?

[jsakalos]

Refer to doc tabPosition.

[rswafford]

Thank you so much for your help...I think I'm off to the races. Cheers!!