support formatting of values in lists; make list icons load faster

build/js/ox.ui.js

@@ -6013,11 +6013,12 @@ requires
                 })
                 .one('load', function() {
                     that.$iconImage.removeClass('OxLoading');
-                    that.$reflectionImage.removeClass('OxLoading');
+                    that.$reflectionImage
+                        .attr({
+                            src: self.options.url
+                        })
+                        .removeClass('OxLoading');
                 });
-            that.$reflectionImage.attr({
-                src: self.options.url
-            });
         }
 
         function mousedown(e) {
@@ -6066,6 +6067,7 @@ requires
             $items: [],
             $pages: [],
             clickTimeout: 0,
+            format: {},
             ids: {},
             itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
             keyboardEvents: {
@@ -6465,6 +6467,7 @@ requires
                         self.$items[pos] = new Ox.ListItem({
                             construct: self.options.construct,
                             data: v,
+                            format: self.options.format,
                             id: v[self.options.unique],
                             position: pos
                         });
@@ -6912,13 +6915,20 @@ requires
                 .defaults({
                     construct: function() {},
                     data: {},
+                    format: [],
                     id: '',
                     position: 0
                 })
                 .options(options || {});
 
         $.each(self.options.data, function(k, v) {
-            self.options.data[k] = $.isArray(v) ? v.join(', ') : v;
+            var format = self.options.format[k];
+            if (Ox.isArray(v)) {
+                self.options.data[k] = v.join(', ');
+            } else if (format) {
+                self.options.data[k] = Ox['format' + Ox.toTitleCase(format.type)]
+                    .apply(this, $.merge([v], format.args));
+            }
         });
 
         that.$element = self.options.construct(self.options.data)
@@ -6949,6 +6959,7 @@ requires
                     columnsRemovable: false,
                     columnsResizable: false,
                     columnWidth: [40, 800],
+                    format: [],
                     id: '',
                     max: -1,
                     min: 0,
@@ -7023,6 +7034,7 @@ requires
 
         that.$body = new Ox.List({
                 construct: constructItem,
+                format: self.options.format,
                 id: self.options.id,
                 itemHeight: 16,
                 itemWidth: getItemWidth(),
@@ -7204,7 +7216,6 @@ requires
                     });
             $.each(self.visibleColumns, function(i, v) {
                 var $cell = $('<div>')
-                
                         .addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
                         .css({
                             width: (self.columnWidths[i] - 9) + 'px',