When I'm trying to use multiple grid on the same page, I can't seem to have different width length for specific columns on different table.

var XmlTest1 = {
init : function(){
var schema = {
tagName: 'detail',
id: 'col1',
fields: ['col1','col2','col3','col4']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "col1", width: 80, sortable: true},
{header: "col2", width: 80, sortable: true},
{header: "col3", width: 80, sortable: true},
{header: "col4", width: 80, sortable: true}
]);

// create the Grid
var grid = new YAHOO.ext.grid.Grid('test1', dataModel, colModel);
grid.autoWidth = true;
grid.autoHeight = true;
grid.render();

dataModel.load('test1.xml');
}
}
YAHOO.ext.EventManager.onDocumentReady(XmlTest1.init, XmlTest1, true);

var XmlTest2 = {
init : function(){
var schema = {
tagName: 'detail',
id: 'cola',
fields: ['cola','colb','colc','cold']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "cola", width: 20, sortable: true},
{header: "colb", width: 40, sortable: true},
{header: "colc", width: 60, sortable: true},
{header: "cold", width: 80, sortable: true}
]);

// create the Grid
var grid = new YAHOO.ext.grid.Grid('test2', dataModel, colModel);
grid.autoWidth = true;
grid.autoHeight = true;
grid.render();

dataModel.load('test1.xml');
}
}
YAHOO.ext.EventManager.onDocumentReady(XmlTest2.init, XmlTest2, true);

When I insert this two grid (test1 and test2) on the same page, seems like the column heading width is what is define, but the grid content width is always following the second one. When I try to adjust the column width of one grid, it's trying to adjust the column widh of every grid on the page, which is not what I want to do.

Woud anyone know how to fix this please let me know.
A thousand thanks!!!