Here is a plugin i developed for adding animations to items in a dataview.
(see example usage below)
/** * @author Sunny Jacob * @class Ext.plugin.DataviewAnimations * @extends Ext.plugin.Plugin * Description * * * @example * * * */ Ext.define('Ext.plugin.DataviewAnimations', { alias: 'plugin.dataviewanimations', defaultAnimationConfig: { easing: 'ease-in', duration: 500, delayAmount: 50, from: { opacity: 0 }, to: { opacity: 1 } }, config: { list: null }, init: function (list) { this.initConfig(); this.setList(list); }, updateList: function (list) { if (list) { list.doRefresh = Ext.Function.createSequence(list.doRefresh, this.animateItems, this); } }, animateItems: function () { debugger; var list = this.getList(); var animations = []; var viewItems = list.getViewItems(); Ext.each(viewItems, function (item, i) { if (Ext.isElement(item)) { var animationConfig; if (list.getAnimationConfig) animationConfig = list.getAnimationConfig() || {}; animationConfig = Ext.Object.merge({}, this.defaultAnimationConfig, animationConfig); Ext.apply(animationConfig, { element: item, delay: animationConfig.delayAmount * i }); animations.push(animationConfig); // var ExtElement = Ext.get(item); } else if (item instanceof Ext.dataview.component.DataItem) //else if (Ext.getClassName(item) === 'Ext.dataview.component.DataItem') { item.show(); //run predefined animation } }, this); Ext.Animator.run(animations); } });
example usage:
Ext.define('MyApp.MyDataView', { extend: 'Ext.dataview.DataView', xtype: 'videolist', requires: [ 'Ext.plugin.DataviewAnimations' ], config: { plugins:['dataviewanimations'], animationConfig:true, store: 'MyStore', cls: 'mylist', itemTpl: new Ext.XTemplate('<div style="background-image:url({picture});"></div>') }, applyAnimationConfig:function() { return { easing: 'ease-in', duration: 5000, delayAmount: 50, from: { opacity: 0 }, to: { opacity: 0.5 } }; }, });
let me know if you have any comments of suggestions