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      : '
Some content here
',
    
    // 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!