Tips & Tricks: Animating Your Ext.DataView
If a data field in your Ext.data.Model has a visual representation in your View, such as the % complete of a progress bar, it is preferable to be able to do a “smart diff” of the rendered markup. By default the Ext.DataView replaces the entire DOM structure representing a Model when a Store change is detected. Doing a smart diff means traversing the DOM structure of a View item and only updating changed attributes such as style, CSS classes and text content. This opens up the door to using CSS transitions such as what you see in this animated GIF.
Let’s say we have a data view rendering items consisting of DIVs of different width. To control the item width, we embed a ‘percentDone’ field found in our example Model. Now when this value changes we would like the DIV to change width using a CSS animation. To add this capability to the data view, we override the onUpdate
method as seen below. Please note that it is private, and the syncContent
method is too. So take into account that these methods may change or be removed completely in future Ext JS versions.
Ext.define('MyDataView', { extend : 'Ext.DataView', tpl : '', // Enable smart diff update of the Task HTML contents onUpdate : function (store, record, operation, modifiedFieldNames) { var fragment = document.createElement('div'); var currentNode = this.getNode(record); var selModel = this.getSelectionModel(); this.tpl.overwrite(fragment, this.collectData([record])); Ext.fly(currentNode).syncContent(fragment.firstChild); selModel.onUpdate(record); if (selModel.isSelected(record)) { this.onItemSelect(record); } } });
Anytime you update the percentDone
field in the Model in the sample data view above, it will be animated by using CSS3 animations:
.myprogressbar { background : #ccc; height : 100%; /* Yay CSS animations */ transition : width 0.3s; }
Thanks to Nige for helping, happy hacking!