X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/ux/DataViewTransition.js diff --git a/examples/ux/DataViewTransition.js b/examples/ux/DataViewTransition.js index 097232a9..0c863b8a 100644 --- a/examples/ux/DataViewTransition.js +++ b/examples/ux/DataViewTransition.js @@ -1,13 +1,7 @@ -/*! - * Ext JS Library 3.2.1 - * 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, { @@ -33,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); @@ -66,14 +60,13 @@ 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), @@ -82,9 +75,10 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { //hide old items Ext.each(removed, function(item) { - Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).fadeOut({ + Ext.fly(this.dataviewID + '-' + item.get(this.idProperty)).animate({ remove : false, - duration: duration / 1000, + duration: duration, + opacity : 0, useDisplay: true }); }, this); @@ -95,12 +89,12 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { return; } - var el = parentEl.child("#" + this.dataviewID + "-" + calcItem.get(this.idProperty)); + 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), @@ -110,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) @@ -123,11 +114,11 @@ 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(this.idProperty), - el = elCache[id] = parentEl.child('#' + this.dataviewID + '-' + id); + el = elCache[id] = Ext.get(this.dataviewID + '-' + 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') + top : el.getTop() - parentEl.getTop() - el.getMargin('t') - parentEl.getPadding('t'), + left: el.getLeft() - parentEl.getLeft() - el.getMargin('l') - parentEl.getPadding('l') }; }, this); @@ -140,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) }); } }); @@ -181,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) { @@ -204,9 +195,9 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { midLeft = oldLeft > newLeft ? oldLeft - diffLeft : oldLeft + diffLeft; Ext.fly(dataviewID + '-' + id).applyStyles({ - top : midTop + 'px', - left: midLeft + 'px' - }); + top : midTop + "px", + left: midLeft + "px" + }); } } }; @@ -217,16 +208,29 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { scope : this }; - Ext.TaskMgr.start(task); + Ext.TaskManager.start(task); + + // + 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(this.idProperty)).applyStyles({ - top : newPositions[id].top, - left: newPositions[id].left - }).fadeIn({ + 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); @@ -293,7 +297,9 @@ Ext.ux.DataViewTransition = Ext.extend(Object, { var removed = []; for (var id in this.cachedStoreData) { - if (store.findExact(this.idProperty, Number(id)) == -1) removed.push(this.cachedStoreData[id]); + if (store.findExact(this.idProperty, Number(id)) == -1) { + removed.push(this.cachedStoreData[id]); + } } return removed; @@ -305,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(this.idProperty)] != undefined) { - remaining[record.get(this.idProperty)] = 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 +});