X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/examples/ux/DataViewTransition.js

diff --git a/examples/ux/DataViewTransition.js b/examples/ux/DataViewTransition.js
index d8a8eadd..097232a9 100644
--- a/examples/ux/DataViewTransition.js
+++ b/examples/ux/DataViewTransition.js
@@ -1,5 +1,5 @@
 /*!
- * Ext JS Library 3.2.0
+ * Ext JS Library 3.2.1
  * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
@@ -19,7 +19,6 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
      */
     defaults: {
         duration  : 750,
-        easing    : 'easeIn',
         idProperty: 'id'
     },
     
@@ -81,10 +80,22 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
                 previous = this.getRemaining(store),
                 existing = Ext.apply({}, previous, added);
             
+            //hide old items
+            Ext.each(removed, function(item) {
+                Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).fadeOut({
+                    remove  : false,
+                    duration: duration / 1000,
+                    useDisplay: true
+                });
+            }, this);
+            
             //store is empty
-            if (calcItem == undefined) return;
+            if (calcItem == undefined) {
+                this.cacheStoreData(store);
+                return;
+            }
             
-            var el = parentEl.child("#" + this.dataviewID + "-" + calcItem.get('id'));
+            var el = parentEl.child("#" + this.dataviewID + "-" + calcItem.get(this.idProperty));
             
             //calculate the number of rows and columns we have
             var itemCount   = store.getCount(),
@@ -111,10 +122,10 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
             
             //find current positions of each element and save a reference in the elCache
             Ext.iterate(previous, function(id, item) {
-                var id = item.get('id'),
+                var id = item.get(this.idProperty),
                     el = elCache[id] = parentEl.child('#' + this.dataviewID + '-' + id);
                 
-                oldPositions[item.get('id')] = {
+                oldPositions[id] = {
                     top : el.getTop()  - parentEl.getTop()  - el.getMargins('t') - parentEl.getPadding('t'),
                     left: el.getLeft() - parentEl.getLeft() - el.getMargins('l') - parentEl.getPadding('l')
                 };
@@ -193,9 +204,9 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
                             midLeft = oldLeft > newLeft ? oldLeft - diffLeft : oldLeft + diffLeft;
                         
                         Ext.fly(dataviewID + '-' + id).applyStyles({
-                            top : midTop,
-                            left: midLeft
-                        });
+                            top : midTop + 'px',
+                            left: midLeft + 'px'
+                        });                        
                     }
                 }
             };
@@ -208,18 +219,9 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
             
             Ext.TaskMgr.start(task);
             
-            //hide old items
-            Ext.each(removed, function(item) {
-                Ext.fly(this.dataviewID + '-' + item.get('id')).fadeOut({
-                    remove  : false,
-                    duration: duration / 1000,
-                    useDisplay: true
-                });
-            }, this);
-            
             //show new items
             Ext.iterate(added, function(id, item) {
-                Ext.fly(this.dataviewID + '-' + item.get('id')).applyStyles({
+                Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).applyStyles({
                     top : newPositions[id].top,
                     left: newPositions[id].left
                 }).fadeIn({
@@ -240,7 +242,7 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
         this.cachedStoreData = {};
         
         store.each(function(record) {
-             this.cachedStoreData[record.get('id')] = record;
+             this.cachedStoreData[record.get(this.idProperty)] = record;
         }, this);
     },
     
@@ -274,8 +276,8 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
         var added = {};
         
         store.each(function(record) {
-            if (this.cachedStoreData[record.get('id')] == undefined) {
-                added[record.get('id')] = record;
+            if (this.cachedStoreData[record.get(this.idProperty)] == undefined) {
+                added[record.get(this.idProperty)] = record;
             }
         }, this);
         
@@ -291,7 +293,7 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
         var removed = [];
         
         for (var id in this.cachedStoreData) {
-            if (store.findExact('id', Number(id)) == -1) removed.push(this.cachedStoreData[id]);
+            if (store.findExact(this.idProperty, Number(id)) == -1) removed.push(this.cachedStoreData[id]);
         }
         
         return removed;
@@ -306,8 +308,8 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
       var remaining = {};
       
       store.each(function(record) {
-          if (this.cachedStoreData[record.get('id')] != undefined) {
-              remaining[record.get('id')] = record;
+          if (this.cachedStoreData[record.get(this.idProperty)] != undefined) {
+              remaining[record.get(this.idProperty)] = record;
           }
       }, this);