From 4eef6ece648324210b9c09ec8f7bc4c31b261d48 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 24 May 2011 19:50:53 +0200
Subject: [PATCH] reducing textlist item construction time by about 80%

---
 demos/listmap2/js/listmap.js        |  2 +-
 source/Ox.UI/js/List/Ox.List.js     |  8 +++++---
 source/Ox.UI/js/List/Ox.TextList.js | 13 +++++++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/demos/listmap2/js/listmap.js b/demos/listmap2/js/listmap.js
index adc3b78e..c6771c4b 100644
--- a/demos/listmap2/js/listmap.js
+++ b/demos/listmap2/js/listmap.js
@@ -23,7 +23,7 @@ Ox.load('Geo', function() {
                         area = Math.sqrt(city.population * 100),
                         latSize = area / Ox.EARTH_CIRCUMFERENCE * 360,
                         lngSize = area * Ox.getDegreesPerMeter(city.latitude);
-                    return city.population > 600000/*400000*/ ? {
+                    return city.population > 400000/*400000*/ ? {
                         area: city.population * 100,
                         countryCode: countryCode,
                         editable: true,
diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js
index c065458e..a5926002 100644
--- a/source/Ox.UI/js/List/Ox.List.js
+++ b/source/Ox.UI/js/List/Ox.List.js
@@ -649,10 +649,11 @@ Ox.List = function(options, self) {
     }
 
     function loadItems() {
+        Ox.print('start loadItems')
         that.$content.empty();
         self.options.items.forEach(function(item, pos) {
             // fixme: duplicated
-            self.$items[pos] = new Ox.ListItem({
+            self.$items[pos] = Ox.ListItem({
                 construct: self.options.construct,
                 data: item,
                 draggable: self.options.draggable,
@@ -663,6 +664,7 @@ Ox.List = function(options, self) {
             self.$items[pos].appendTo(that.$content);
         });
         self.selected.length && scrollToPosition(self.selected[0]);
+        Ox.print('stop loadItems')
     }
 
     function getPageLength(page) {
@@ -1232,7 +1234,6 @@ Ox.List = function(options, self) {
     }
 
     function updateSort() {
-        Ox.print('start sort')
         var key = self.options.sort[0].key,
             map = self.options.sort[0].map,
             operator = self.options.sort[0].operator,
@@ -1244,6 +1245,7 @@ Ox.List = function(options, self) {
                 self.options.items.forEach(function(item) {
                     sort[item.id] = map ? map(item[key]) : item[key];
                 });
+                Ox.print('start sort')
                 self.options.items.sort(function(a, b) {
                     var aValue = sort[a.id],
                         bValue = sort[b.id],
@@ -1255,6 +1257,7 @@ Ox.List = function(options, self) {
                     }
                     return ret;
                 });
+                Ox.print('end sort')
                 if (selectedIds.length) {
                     self.selected = [];
                     self.options.items.forEach(function(item, i) {
@@ -1269,7 +1272,6 @@ Ox.List = function(options, self) {
                 getPositions();
             }
         }
-        Ox.print('end sort')
     }
 
     self.setOption = function(key, value) {
diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js
index 101d0630..6f55dd46 100644
--- a/source/Ox.UI/js/List/Ox.TextList.js
+++ b/source/Ox.UI/js/List/Ox.TextList.js
@@ -526,12 +526,20 @@ Ox.TextList = function(options, self) {
     }
 
     function getItemWidth() {
+        // fixme: this gets called for every constructItem and is slooow
+        // the proper way to fix this would be to find out how and when
+        // that.$element.width() might change... which would probably
+        // mean binding to every SplitPanel and window resize...
+        // for now, use a cached value
+        if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
+            self.cachedWidth = that.$element.width();
+            self.cachedWidthTime = +new Date();
+        }
         return Math.max(
             Ox.sum(self.columnWidths),
-            that.$element.width() -
+            self.cachedWidth -
             (self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE : 0)
         );
-        //return Ox.sum(self.columnWidths)
     }
 
     function moveColumn(id, pos) {
@@ -776,6 +784,7 @@ Ox.TextList = function(options, self) {
     }
 
     that.size = function() {
+        Ox.print('SIZE FUNCTION CALLED')
         setWidth();
         that.$body.size();
     }