more fixes (list)

build/js/ox.ui.js

@@ -2724,6 +2724,7 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     columns: [],
+                    columnWidth: [40, 800],
                     request: function() {}, // {sort, range, keys, callback}
                     sort: []
                 })
@@ -2736,7 +2737,7 @@ requires
             page: 0,
             pageLength: 100,
             scrollLeft: 0,
-            selectedColumn: getColumnById(self.options.sort[0].key),
+            selectedColumn: getColumnIndexById(self.options.sort[0].key),
             visibleColumns: $.map(self.options.columns, function(v, i) {
                 return v.visible ? v : null;
             })
@@ -2767,7 +2768,7 @@ requires
                 })
                 .html(v.title)
                 .click(function() {
-                    clickColumn(v)
+                    clickColumn(v.id)
                 })
                 .appendTo(that.$head.$content.$element);
             $order = $("<div>")
@@ -2786,8 +2787,12 @@ requires
                         initialX = e.clientX;
                     $window.mousemove(function(e) {
                         var x = e.clientX,
-                            width = Ox.limit(initialWidth - initialX + x, 40, 512);
-                            resizeColumn(i, width);
+                            width = Ox.limit(
+                                initialWidth - initialX + x,
+                                self.options.columnWidth[0],
+                                self.options.columnWidth[1]
+                            );
+                            resizeColumn(v.id, width);
                     });
                     $window.mouseup(function() {
                         $window.unbind("mousemove");
@@ -2795,7 +2800,7 @@ requires
                     });
                 })
                 .dblclick(function() {
-                    resizeColumn(i, v.width);
+                    resizeColumn(v.id, v.width);
                 })
                 .appendTo(that.$head.$content.$element);
             $left = $("<div>").addClass("OxLeft").appendTo($resize);
@@ -2805,8 +2810,8 @@ requires
         that.$head.$content.css({
             width: (Ox.sum(self.columnWidths) + 2) + "px"
         });
-        toggleSelected(self.selectedColumn);
-        that.$titles[self.selectedColumn].css({
+        toggleSelected(self.options.columns[self.selectedColumn].id);
+        that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
             width: (self.options.columns[self.selectedColumn].width - 25) + "px"
         });
         that.$select = $("<div>")
@@ -2846,10 +2851,13 @@ requires
             
         }
 
-        function clickColumn(data) {
-            var isSelected = self.options.sort[0].key == data.id;
+        function clickColumn(id) {
+            var i = getColumnIndexById(id),
+                isSelected = self.options.sort[0].key == self.options.columns[i].id;
             that.sort(
-                data.id, isSelected ? (self.options.sort[0].operator == "+" ? "-" : "+") : data.operator
+                self.options.columns[i].id, isSelected ?
+                (self.options.sort[0].operator == "+" ? "-" : "+") :
+                self.options.columns[i].operator
             );
         }
 
@@ -2873,7 +2881,7 @@ requires
             return $item;
         }
 
-        function getColumnById(id) {
+        function getColumnIndexById(id) {
             var pos = -1;
             $.each(self.options.columns, function(i, v) {
                 if (v.id == id) {
@@ -2884,6 +2892,17 @@ requires
             return pos;
         }
 
+        function getColumnPositionById(id) {
+            var pos = -1;
+            $.each(self.visibleColumns, function(i, v) {
+                if (v.id == id) {
+                    pos = i;
+                    return false;
+                }
+            });
+            return pos;
+        }
+
         function moveColumn(id) {
             
         }
@@ -2892,13 +2911,15 @@ requires
             
         }
 
-        function resizeColumn(pos, width) {
+        function resizeColumn(id, width) {
+            var i = getColumnIndexById(id),
+                pos = getColumnPositionById(id);
             self.columnWidths[pos] = width;
             that.$head.$content.css({
                 width: (Ox.sum(self.columnWidths) + 2) + "px"
             });
             that.$titles[pos].css({
-                width: (width - 9 - (pos == self.selectedColumn ? 16 : 0)) + "px"
+                width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + "px"
             });
             that.$body.$content.find(".OxItem").css({ // fixme: can we avoid this lookup?
                 width: Ox.sum(self.columnWidths) + "px"
@@ -2906,18 +2927,15 @@ requires
             that.$body.$content.css({
                 width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - 12) + "px" // fixme: check if scrollbar visible, and listen to resize/toggle event
             });
-            $(".OxColumn" + Ox.toTitleCase(self.options.columns[pos].id)).css({
+            $(".OxColumn" + Ox.toTitleCase(self.options.columns[i].id)).css({
                 width: (width - 9) + "px"
             });
             that.$body.clearCache();
         }
 
-        function selectColumn(pos) {
-            that.sort(args.columns[pos].id, args.columns[pos].operator);
-        }
-
-        function toggleSelected(pos) {
-            updateOrder(pos);
+        function toggleSelected(id) {
+            var pos = getColumnPositionById(id);
+            updateOrder(id);
             pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass("OxSelected");
             that.$titles[pos].toggleClass("OxSelected");
             that.$titles[pos].next().toggleClass("OxSelected");
@@ -2929,7 +2947,9 @@ requires
             });
         }
 
-        function updateOrder(pos) {
+        function updateOrder(id) {
+            var pos = getColumnPositionById(id);
+            Ox.print(id, pos)
             that.$titles[pos].next().html(oxui.symbols[
                 "triangle_" +  (self.options.sort[0].operator == "+" ? "up" : "down")
             ]);
@@ -2944,11 +2964,11 @@ requires
                 }
             ];
             if (isSelected) {
-                updateOrder(self.selectedColumn);
+                updateOrder(self.options.columns[self.selectedColumn].id);
             } else {
-                toggleSelected(self.selectedColumn);
-                self.selectedColumn = getColumnById(key);
-                toggleSelected(self.selectedColumn);
+                toggleSelected(self.options.columns[self.selectedColumn].id);
+                self.selectedColumn = getColumnIndexById(key);
+                toggleSelected(self.options.columns[self.selectedColumn].id);
             }
             that.$body.sort(self.options.sort[0].key, self.options.sort[0].operator);
         };

demos/test/list.js

@@ -34,6 +34,14 @@ $(function() {
         }),
         $list = new Ox.TextList({
             columns: [
+                {
+                    align: "left",
+                    id: "id",
+                    operator: "+",
+                    title: "ID",
+                    visible: false,
+                    width: 80
+                },
                 {
                     align: "left",
                     id: "title",