[SOLVED] Grid columns not sizing as expected

[Ben]

Hi,
I'm building a search results grid and having trouble with column sizes taking the data size instead of the ColumnModel's defined sizes. I've attached a partial screenshot (taken from Firefox 2) that shows what I mean. My code is as follows:



var cm = new Ext.grid.ColumnModel([ //sum to 800
{header: "Id", width: 50, dataIndex: 'eouid'},
{header: "Name", width: 340, dataIndex: 'name'},
{header: "Status", width: 70, dataIndex: 'status'},
{header: "Brokerage", width: 340, dataIndex: 'brokerageName'}
]);
cm.defaultSortable = true;

// collapse the grid container so that the new grid sizes the container
Ext.get(this.uid + '-search-browser-grid').setHeight(0);

// create the grid
this.grid = new Ext.grid.Grid(this.uid + '-search-browser-grid', {
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
autoSizeColumns: false,
browser: this,
ds: ds,
cm: cm
});

this.grid.render();
this.grid.getSelectionModel().selectFirstRow();

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

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 15,
displayInfo: true,
displayMsg: 'Displaying organisation {0} - {1} of {2}',
emptyMsg: "No organisations to display"
});

this.grid.on("rowdblclick", function(grid, rowIndex, e) {
selected = this.browser.grid.getDataSource().getAt(rowIndex);
var node = {
id: selected.data['eouid'],
text: selected.data['name']
};

this.browser.loadEOUPanel(node);
});

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


Is there something I'm doing wrong, or am I going mad?

Thanks,
Ben

[Ben]

I spent a bit more time searching around grid-related threads and it occurred to me that id of the grid-containing div might be the problem. The HTML is generated from a JSP like this:



<div style="width:800px;" id="${uniqueId}-search-browser-grid"></div>


So that I can have many search browsers grid instances in existence at the same time (albeit, most of them off-screen).

The fix was as simple as this:



<div style="width:800px;" id="search-browser-grid-${uniqueId}"></div>


Given that the uniqueId is just a number, I really don't see what the problem was, but there you go. :-/

ttfn,
Ben

[tryanDLS]

Did uniqueid start with a number or underscore? Both of these violate the HTML spec and while it works for some things, it will cause problems in others.

[Ben]

Did uniqueid start with a number or underscore? Both of these violate the HTML spec and while it works for some things, it will cause problems in others.

It was entirely numeric - I hadn't realized HTML id's had to start with a letter!

Clearly, my bad!

Thankfully, there were only a handful of instances of this error in my application so far, so it hasn't been too big a deal to fix it. :)

Ben