I am using Ext.view.View which has xtype dataview. It's great for binding data to your view.

I am using this to bind to my data so that when the data changes so does the view automatically.

The problem is that I refresh the data every x seconds so that the user is kept updated (the data changes quickly). However, the HTML is completely replaced and re-rendered so any inline styles are lost! Huge performance bummer as maybe only a small part of the data changes, but also we lose any styles that have been added due to user interaction - hiding an image for example.

Is there any way of ensuring that we update only the src of every image on screen and not re-render them all?

Also, is there any way of binding each record to a HTML element so that Ext can associate a record with an onscreen piece of html?

Please help me here!

HTML Code:
Ext.define('MyApp.AnimatePanelViewModel', {
    extend: 'Ext.app.ViewModel',


    title: 'DataView Example with animation',


    alias: 'viewmodel.animatepanelviewmodel',


    stores: {
    viewdata: {
        fields: [{
        name: 'src',
        type: 'string'
    }, {
        name: 'caption',
        type: 'string'
    }, {
        name: 'title',
        type: 'string'
    }],
    proxy: {
        type: 'ajax',
        url: 'app/view/animation/viewdata.json',
        reader: {
            type: 'json'
        }
    },
    autoLoad: false
    }
}
});


Ext.define('MyApp.AnimatePanelView', {
    extend: 'Ext.view.View',


    requires: [
        'MyApp.AnimatePanelViewModel'
    ],


    title: 'DataView Example with animation',


    alias: 'widget.animatepanelview',


    cls: 'dataviewcontainer',


    viewModel: 'animatepanelviewmodel',


    tpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
        '<h3 class="title">{title}</h3>',
        '<div class="content">',
        '<img src="{src}" class="imgTpl" />',
        '</div>',
        '</div>',
        '</tpl>'
    ),
    itemSelector: 'body',


    emptyText: 'No data available',


    initComponent: function () {
        var me = this,
        vm = me.getViewModel(),
        store = vm.getStore('viewdata');
        Ext.apply(me, {
            store: store
        });
     store.load();
    me.poll(store);
    me.callParent();
},


    poll: function (store) {
        var me = this,
            runner = new Ext.util.TaskRunner(),
            task = runner.newTask({
        run: function () {
        if (me.isVisible()) {
            store.reload();
        }
    },
    interval: 10000
    });
    task.start();
}
});

// THE DATA
[{  "src": "https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",  "title": "One"}, 
{  "src": "https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",  "title": "Two"}, 
{  "src": "https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",  "title": "Three"}, {  "src": "https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",  "title": "Four"}, 
{  "src": "https://assets-cdn.github.com/images/modules/logos_page/Octocat.png",  "title": "Five"}]