adding functionality for textlist

build/css/ox.ui.classic.css

@@ -208,7 +208,7 @@ Lists
 
 
 .OxThemeClassic .OxTextList .OxItem .OxCell {
-    border-right: 1px solid rgb(224, 224, 224);
+    border-right-color: rgb(224, 224, 224);
 }
 .OxThemeClassic .OxTextList .OxItem:nth-child(odd) {
     background: rgb(242, 242, 242);

build/css/ox.ui.css

@@ -859,7 +859,7 @@ Lists
     float: left;
     position: absolute;
     left: 0;
-    top: 16px;
+    top: 0;
     right: 0;
     bottom: 0;
     overflow-y: scroll;
@@ -874,11 +874,16 @@ Lists
 .OxTextList .OxBody .OxItem .OxCell {
     float: left;
     height: 14px;
-    padding: 2px 4px 0 4px;
+    padding: 1px 4px 1px 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
+.OxTextList .OxBody .OxItem .OxCell > img {
+    width: 16px;
+    height: 16px;
+    margin: -1px 0 0 -4px;
+}
 .OxTextList .OxBody .OxItem .OxSpace {
     float: left;
     width: 4px;

build/css/ox.ui.modern.css

@@ -186,7 +186,7 @@ Lists
 
 
 .OxThemeModern .OxTextList .OxItem .OxCell {
-    border-right: 1px solid rgb(32, 32, 32);
+    border-right-color: rgb(32, 32, 32);
 }
 .OxThemeModern .OxTextList .OxItem:nth-child(odd) {
     background: rgb(14, 14, 14);

build/js/ox.ui.js

@@ -6512,10 +6512,13 @@ requires
                     Ox.print('---- self.$pages', self.$pages)
                     ++counter == 2 && !Ox.isUndefined(callback) && callback();
                 };
+            // fixme: find out which option is better
             loadPage(page, function() {
-                loadPage(page - 1, fn);
+                //loadPage(page - 1, fn);
-                loadPage(page + 1, fn);
+                //loadPage(page + 1, fn);
             });
+            loadPage(page - 1, fn);
+            loadPage(page + 1, fn);
         }
 
         function mousedown(e) {
@@ -6529,10 +6532,10 @@ requires
                 if (!self.clickTimeout) {
                     // click
                     pos = $item.data('position');
-                    if (e.metaKey && self.options.max == -1) {
+                    if (e.metaKey) {
-                        if (!isSelected(pos)) {
+                        if (!isSelected(pos) && self.options.max == -1) {
                             addToSelection(pos);
-                        } else {
+                        } else if (self.options.min == 0) {
                             deselectTimeout = true;
                         }
                     } else if (e.shiftKey && self.options.max == -1) {
@@ -6937,17 +6940,20 @@ requires
                 })
                 .options(options || {});
 
-        $.each(self.options.data, function(k, v) {
+        // make a clone, so we don't format cached data
+        self.data = $.extend({}, self.options.data);
+
+        $.each(self.data, function(k, v) {
             var format = self.options.format[k];
             if (Ox.isArray(v)) {
-                self.options.data[k] = v.join(', ');
+                self.data[k] = v.join(', ');
             } else if (format) {
-                self.options.data[k] = Ox['format' + Ox.toTitleCase(format.type)]
+                self.data[k] = Ox['format' + Ox.toTitleCase(format.type)]
                     .apply(this, $.merge([v], format.args));
             }
         });
 
-        that.$element = self.options.construct(self.options.data)
+        that.$element = self.options.construct(self.data)
             .addClass('OxItem')
             .attr({
                 id: self.options.id
@@ -6974,6 +6980,7 @@ requires
                     columnsMovable: false,
                     columnsRemovable: false,
                     columnsResizable: false,
+                    columnsVisible: false,
                     columnWidth: [40, 800],
                     format: [],
                     id: '',
@@ -7018,32 +7025,34 @@ requires
 
         // Head
 
-        that.$bar = new Ox.Bar({
+        if (self.options.columnsVisible) {
-            orientation: 'horizontal',
+            that.$bar = new Ox.Bar({
-            size: 16
+                orientation: 'horizontal',
-        }).appendTo(that);
+                size: 16
-        that.$head = new Ox.Container()
+            }).appendTo(that);
-            .addClass('OxHead')
+            that.$head = new Ox.Container()
-            .appendTo(that.$bar);
+                .addClass('OxHead')
-        that.$head.$content.addClass('OxTitles');
+                .appendTo(that.$bar);
-        constructHead();
+            that.$head.$content.addClass('OxTitles');
-        if (self.options.columnsRemovable) {
+            constructHead();
-            that.$select = new Ox.Select({
+            if (self.options.columnsRemovable) {
-                    id: self.options.id + 'SelectColumns',
+                that.$select = new Ox.Select({
-                    items: $.map(self.options.columns, function(v, i) {
+                        id: self.options.id + 'SelectColumns',
-                        return {
+                        items: $.map(self.options.columns, function(v, i) {
-                            checked: v.visible,
+                            return {
-                            disabled: v.removable === false,
+                                checked: v.visible,
-                            id: v.id,
+                                disabled: v.removable === false,
-                            title: v.title
+                                id: v.id,
-                        }
+                                title: v.title
-                    }),
+                            }
-                    max: -1,
+                        }),
-                    min: 1,
+                        max: -1,
-                    type: 'image'
+                        min: 1,
-                })
+                        type: 'image'
-                .bindEvent('change', changeColumns)
+                    })
-                .appendTo(that.$bar.$element);
+                    .bindEvent('change', changeColumns)
+                    .appendTo(that.$bar.$element);
+            }
         }
 
         // Body
@@ -7067,11 +7076,15 @@ requires
                 unique: self.unique
             }, $.extend({}, self)) // pass event handler
             .addClass('OxBody')
+            .css({
+                top: (self.options.columnsVisible ? 16 : 0) + 'px',
+                overflowY: (self.options.columnsVisible ? 'scroll' : 'auto')
+            })
             .scroll(function() {
                 var scrollLeft = $(this).scrollLeft();
                 if (scrollLeft != self.scrollLeft) {
                     self.scrollLeft = scrollLeft;
-                    that.$head.scrollLeft(scrollLeft);
+                    that.$head && that.$head.scrollLeft(scrollLeft);
                 }
             })
             .bindEvent({
@@ -7234,10 +7247,11 @@ requires
                 var $cell = $('<div>')
                         .addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
                         .css({
-                            width: (self.columnWidths[i] - 9) + 'px',
+                            width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
+                            borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
                             textAlign: v.align
                         })
-                        .html(!$.isEmptyObject(data) && data[v.id] ? data[v.id] : '')
+                        .html(v.id in data ? data[v.id] : '')
                         .appendTo($item);
             });
             return $item;