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: [

    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" />',
    itemSelector: 'body',

    emptyText: 'No data available',

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

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

[{  "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"}]