When displaying a GridPanel in IE6, the column headers disappear if both autoheight and width parameters are set on the GridPanel. Sometimes the headers are initially present, and then disappear as soon as the cursor is moved over the grid.
If the autoheight parameter is removed, and instead a height is set, then the column headers display correctly. If the width parameter is removed, then the headers are displayed. The problem only occurs if both autoheight and width are set.
This happens in IE6 (6.0.2900.2180 SP2) on Windows XP Pro SP2, but works without problem in Firefox 3. I have not tried any other browser versions. The symptom is the same in Ext 2.02 and in Ext 2.2. I have not tried any other Ext versions.
See the attached screen shots to see the symptom. The first screen shot is the IE6 grid, with the missing column headers. The second shot is the same code running in Firefox 3. Currently this is stopping me from using Ext for my application. Please let me know if there is a workaround.
The complete code is listed below.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<title>Ext Ajax Bean Test</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
</script>
<script type="text/javascript">
var bean; // current bean being displayed on this page
function processList() {
var listProxy = new Ext.data.MemoryProxy(bean);
var SubBean = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'number'}
]);
var listReader = new Ext.data.JsonReader(
{ root: "list", id: "id" }, SubBean );
var listStore = new Ext.data.Store({
proxy: listProxy,
reader: listReader
});
listStore.load();
var listColModel = new Ext.grid.ColumnModel([
{id:'id',header: "ID", width: 60, dataIndex: 'id'},
{header: "Amount", width: 80, dataIndex: 'number'},
{header: "Name", width: 100, dataIndex: 'name'}
]);
var listGrid = new Ext.grid.GridPanel({
store: listStore,
colModel: listColModel,
width:300,
// height:200,
// maxHeight:300,
autoHeight:true,
renderTo: 'listGridDiv'
});
}
Ext.onReady(function()
{
bean = {
"list": [
{ "id": "abc", "name": "Name abc", "number": 103 },
{ "id": "bad", "name": "Name bad", "number": 104 },
{ "id": "cab", "name": "Name cab", "number": 105 },
{ "id": "def", "name": "Name def", "number": 106 },
{ "id": "rat", "name": "Name rat", "number": 107 }
]
};
processList();
});
</script>
</head>
<body>
<h1>Testing Ext Grid </h1>
<div id="listGridDiv"/>
</body>
</html>
[2.0.2/2.2] PanelGrid column headers disappear in IE6 if specify autoheight+width
Reply With Quote