-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/**
* @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, {
*/
defaults: {
duration : 750,
- easing : 'easeIn',
idProperty: 'id'
},
/**
* 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);
*/
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),
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)
//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);
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)
});
}
});
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) {
midLeft = oldLeft > newLeft ? oldLeft - diffLeft : oldLeft + diffLeft;
Ext.fly(dataviewID + '-' + id).applyStyles({
- top : midTop,
- left: midLeft
+ top : midTop + "px",
+ left: midLeft + "px"
});
}
}
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);
+ //<debug>
+ var count = 0;
+ for (var k in added) {
+ count++;
+ }
+ if (Ext.global.console && Ext.global.console.log) {
+ Ext.global.console.log('added:', count);
+ }
+ //</debug>
//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);
this.cachedStoreData = {};
store.each(function(record) {
- this.cachedStoreData[record.get('id')] = record;
+ this.cachedStoreData[record.get(this.idProperty)] = record;
}, this);
},
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);
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;
* @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
+});
+
git.ithinksw.org / extjs.git / blobdiff