Results 1 to 4 of 4

Thread: Grid: Adding an image column adds additional rows to the grid

  1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    13

    Default Grid: Adding an image column adds additional rows to the grid

    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:
    Code:
    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
    Code:
    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.
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    You might be having issues b/c that img tag is not properly closed.

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    13

    Default

    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

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Posts
    13

    Default

    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?

    Code:
    <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>
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •