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

diff --git a/examples/ux/DataViewTransition.js b/examples/ux/DataViewTransition.js
index d8a8eadd..b2544d63 100644
--- a/examples/ux/DataViewTransition.js
+++ b/examples/ux/DataViewTransition.js
@@ -1,8 +1,8 @@
 /*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
 /**
  * @class Ext.ux.DataViewTransition
@@ -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')
                 };
@@ -129,12 +140,12 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
                 if (el.getStyle('position') != 'absolute') {
                     elCache[id].applyStyles({
                         position: 'absolute',
-                        left    : oldPos.left,
-                        top     : oldPos.top,
+                        left    : oldPos.left + "px",
+                        top     : oldPos.top + "px",
 
                         //we set the width here to make ListViews work correctly. This is not needed for DataViews
-                        width   : el.getWidth(!Ext.isIE),
-                        height  : el.getHeight(!Ext.isIE)
+                        width   : el.getWidth(!Ext.isIE || Ext.isStrict),
+                        height  : el.getHeight(!Ext.isIE || Ext.isStrict)
                     });
                 }
             });
@@ -170,8 +181,8 @@ Ext.ux.DataViewTransition = Ext.extend(Object, {
                 if (fraction >= 1) {
                     for (var id in newPositions) {
                         Ext.fly(dataviewID + '-' + id).applyStyles({
-                            top : newPositions[id].top,
-                            left: newPositions[id].left
+                            top : newPositions[id].top + "px",
+                            left: newPositions[id].left + "px"
                         });
                     }
                     
@@ -193,8 +204,8 @@ 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,20 +219,11 @@ 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({
-                    top : newPositions[id].top,
-                    left: newPositions[id].left
+                Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).applyStyles({
+                    top : newPositions[id].top + "px",
+                    left: newPositions[id].left + "px"
                 }).fadeIn({
                     remove  : false,
                     duration: duration / 1000
@@ -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);