X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/ux/DataViewTransition.js diff --git a/examples/ux/DataViewTransition.js b/examples/ux/DataViewTransition.js index d8a8eadd..0c863b8a 100644 --- a/examples/ux/DataViewTransition.js +++ b/examples/ux/DataViewTransition.js @@ -1,13 +1,7 @@ -/*! - * Ext JS Library 3.2.0 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license - */ /** * @class Ext.ux.DataViewTransition * @extends Object - * @author Ed Spencer (http://extjs.com) + * @author Ed Spencer (http://sencha.com) * Transition plugin for DataViews */ Ext.ux.DataViewTransition = Ext.extend(Object, { @@ -19,7 +13,6 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { */ defaults: { duration : 750, - easing : 'easeIn', idProperty: 'id' }, @@ -34,21 +27,21 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { /** * Initializes the transition plugin. Overrides the dataview's default refresh function - * @param {Ext.DataView} dataview The dataview + * @param {Ext.view.View} dataview The dataview */ init: function(dataview) { /** * @property dataview - * @type Ext.DataView + * @type Ext.view.View * Reference to the DataView this instance is bound to */ this.dataview = dataview; var idProperty = this.idProperty; dataview.blockRefresh = true; - dataview.updateIndexes = dataview.updateIndexes.createSequence(function() { - this.getTemplateTarget().select(this.itemSelector).each(function(element, composite, index) { - element.id = element.dom.id = String.format("{0}-{1}", dataview.id, store.getAt(index).get(idProperty)); + dataview.updateIndexes = Ext.Function.createSequence(dataview.updateIndexes, function() { + this.getTargetEl().select(this.itemSelector).each(function(element, composite, index) { + element.id = element.dom.id = Ext.util.Format.format("{0}-{1}", dataview.id, dataview.store.getAt(index).get(idProperty)); }, this); }, dataview); @@ -67,29 +60,41 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { */ this.cachedStoreData = {}; - var store = dataview.store; + //var store = dataview.store; - //cache the data immediately, and again on any load operation - this.cacheStoreData(store); - store.on('load', this.cacheStoreData, this); + //catch the store data with the snapshot immediately + this.cacheStoreData(dataview.store.snapshot); - store.on('datachanged', function(store) { - var parentEl = dataview.getTemplateTarget(), + dataview.store.on('datachanged', function(store) { + var parentEl = dataview.getTargetEl(), calcItem = store.getAt(0), added = this.getAdded(store), removed = this.getRemoved(store), 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)).animate({ + remove : false, + duration: duration, + opacity : 0, + 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 = Ext.get(this.dataviewID + "-" + calcItem.get(this.idProperty)); //calculate the number of rows and columns we have var itemCount = store.getCount(), - itemWidth = el.getMargins('lr') + el.getWidth(), - itemHeight = el.getMargins('bt') + el.getHeight(), + itemWidth = el.getMargin('lr') + el.getWidth(), + itemHeight = el.getMargin('bt') + el.getHeight(), dvWidth = parentEl.getWidth(), columns = Math.floor(dvWidth / itemWidth), rows = Math.ceil(itemCount / columns), @@ -99,9 +104,6 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { parentEl.applyStyles({ display : 'block', position: 'relative' - // , - // height : Ext.max([rows, currentRows]) * itemHeight, - // width : columns * itemWidth }); //stores the current top and left values for each element (discovered below) @@ -111,12 +113,12 @@ 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'), - el = elCache[id] = parentEl.child('#' + this.dataviewID + '-' + id); + var id = item.get(this.idProperty), + el = elCache[id] = Ext.get(this.dataviewID + '-' + id); - oldPositions[item.get('id')] = { - top : el.getTop() - parentEl.getTop() - el.getMargins('t') - parentEl.getPadding('t'), - left: el.getLeft() - parentEl.getLeft() - el.getMargins('l') - parentEl.getPadding('l') + oldPositions[id] = { + top : el.getTop() - parentEl.getTop() - el.getMargin('t') - parentEl.getPadding('t'), + left: el.getLeft() - parentEl.getLeft() - el.getMargin('l') - parentEl.getPadding('l') }; }, this); @@ -129,12 +131,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,12 +172,12 @@ 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" }); } - Ext.TaskMgr.stop(task); + Ext.TaskManager.stop(task); } else { //move each item for (var id in newPositions) { @@ -193,8 +195,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" }); } } @@ -206,25 +208,29 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { scope : this }; - Ext.TaskMgr.start(task); + Ext.TaskManager.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); + // + var count = 0; + for (var k in added) { + count++; + } + if (Ext.global.console) { + Ext.global.console.log('added:', count); + } + // //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 - }).fadeIn({ + Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).applyStyles({ + top : newPositions[item.get(this.idProperty)].top + "px", + left : newPositions[item.get(this.idProperty)].left + "px" + }); + + Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).animate({ remove : false, - duration: duration / 1000 + duration: duration, + opacity : 1 }); }, this); @@ -240,7 +246,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 +280,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 +297,9 @@ 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; @@ -303,14 +311,14 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { * @return {Object} Object of records that are still present from last time in format {id: record} */ getRemaining: function(store) { - var remaining = {}; - - store.each(function(record) { - if (this.cachedStoreData[record.get('id')] != undefined) { - remaining[record.get('id')] = record; - } - }, this); - - return remaining; + var remaining = {}; + + store.each(function(record) { + if (this.cachedStoreData[record.get(this.idProperty)] != undefined) { + remaining[record.get(this.idProperty)] = record; + } + }, this); + + return remaining; } -}); \ No newline at end of file +});