How do I get images in a ListView control?

There are some issues getting reliable images in a ListView control in all browsers. There are two possible ways: an iconHtml column or an image column.

When you use an iconHTML column, explicitly specify iconWidth and iconHeight for images in the column.

For example, this code defines the columns in the ListView:

var lc1 =
{
        pubtime : 
                        { label : "Pub Time", 
                          width : 120, 
                          type : "text", 
                          sortable : true, 
                          sortprop : "text" },
         images : 
                       { label : "Img?", 
                          width : 24, 
                          type : "iconHtml" },
         headline : 
                       { label : "Headline", 
                          width : 240, 
                          type : "text", 
                          sortable : true, 
                          sortprop : "text" }
     }
 
var ld1 = [];
lv1 = new qx.ui.listview.ListView(ld1, lc1);

This defines the image column to be iconHtml. When loading data into the column, use something like this:

 lv1.getData().removeAll();
lv1.getData().push ({
               pubtime: 
                            { text: "2006-02-26" },
               images:  
                            { icon: "icons/16/thumbnail.png", 
                               iconWidth: 16, 
                               iconHeight:16 },
               headline: 
                            { text: "Headline 1" }
});

Note that iconWidth and iconHeight properties are specified explicitly. If this isn’t done, it will only work in Firefox/Gecko and not in IE.

For the original discussion about this see this mailing list thread.