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.

In qooxdoo 0.5.1 both possibilities have problems. Code in CVS (and therefore a release later than 0.5.1) has a fix for iconHtml but a little more work is required.

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 QxListView(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.