PDA

View Full Version : Grid: Adding an image column adds additional rows to the grid



JavaDirk
25 Oct 2007, 11:23 PM
Hi folks,

I have one question concerning a grid:

I created one with the first column being one with an image / icon in it by adding a renderer function to the column which looks like this:


function getIcon(value){
return '<img src="icons/person.gif">';
}

This works but it adds additional empty rows to the grid (cf. screenshot1). If I change the renderer function to return simple text for example


function getIcon(value){
return 'YE';
}

there are no additional rows (cf. screenshot2). What did I do wrong with the images?

Thanks for any answer. Dirk

PS: I forgot to mention that this is a firefox issue. IE doesn't show additional empty rows.

tryanDLS
26 Oct 2007, 8:55 AM
You might be having issues b/c that img tag is not properly closed.

JavaDirk
30 Oct 2007, 4:26 AM
Hi Tim,

thank you for your answer. You're right with the closing tag, but adding one does not solve the problem. I found out, that if I take an image with size 16x16 (the image previously taken is width 9, height 12), the "empty gap" is smaller. Do you have an idea what is happening here? With Firebug I can see, that there are no additional rows or something like that, but the table height is set to 175px (or 150px with the bigger image).

Thanks for any comment.

Dirk

JavaDirk
6 Nov 2007, 12:14 AM
I reduced my code to identify the problem. This is what is left (I have attached the image file, too). Does anyone of you have the same problem like me with Firefox?



<head>
<script type="text/javascript" src="lib/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="lib/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="lib/resources/css/ext-all.css">
<script>

function Init()
{
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [];

for(var i = 0;i<10;++i)
{
myData[i] = [];
myData[i][0] = "FirstName LastName";
myData[i][1] = "Company";
}

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'company'}
])
});
ds.loadData(myData);

function getIcon(value)
{
return '<img src="icons/person.gif" />';
}

var colModel = new Ext.grid.ColumnModel([
{header: "Icon", renderer: getIcon},
{header: "Name", width: 125, dataIndex: 'name'},
{header: "Firma", width: 110, dataIndex: 'company'}
]);

var contactListTable = new Ext.grid.Grid('selectionContactListDiv', {ds: ds, cm: colModel});
contactListTable.render();

Ext.get('selectionContactListDiv').show();
}
</script>
</head>

<body onLoad="Init();" onUnload="" >
<div id="selectionContactListDiv" style="overflow: hidden; border:1px solid #7BA4E0;visibility:hidden;" ></div>
</body>
</html>