javascript - Canvas getting cleared when adding data to store in Sencha Touch List -

i have sencha touch ext.list has 1 html5 canvas. whenever adding item store canvas element getting lost.

refer fiddle:- https://fiddle.sencha.com/fiddle/74i/

is there way add records ext.list dynamically without affecting canvas.

this issue because of bug in sencha touch 2.3.1 + versions. workaround here add refresh listener event in ext.list redraw canvas every time store updated.

the modified below:

ext.application({ name: 'fiddle',      launch: function() {  } });  ext.define('contact', { extend: 'ext.data.model', config: {     idproperty: 'firstname',     fields: ['firstname', 'lastname'] } });  ext.define('contacts', { extend: 'ext.data.store', config: {     model: 'contact',     storeid: 'contacts',     data: [{         firstname: 'tommy',         lastname: 'maintz'     }, {         firstname: 'rob',         lastname: 'dougan'     }, {         firstname: 'ed',         lastname: 'spencer'     }, {         firstname: 'jamie',         lastname: 'avins'     }] } });  var store = ext.create('contacts');  ext.create('ext.list', { fullscreen: true, itemtpl: '<div> <div class="contact">{firstname} <strong>{lastname}</strong></div>' + '<div> <canvas class = "drawcanvas" id="{firstname}" width="200" height="100" "> <div>' + '</div>', store: 'contacts', listeners: {     'refresh': function(cmp) {         console.log('calling refresh');          var canvasarray = cmp.element.dom.getelementsbyclassname('drawcanvas');         ext.array.each(canvasarray, function(canvas, index) {             var ctx = canvas.getcontext("2d");             ctx.fillstyle = "#ff0000";             ctx.fillrect(0, 0, 150, 75);         });     },     'initialize': function(cmp) {         console.log('calling initialize');         cmp.getstore().on('addrecords', function(store, records, eopts) {             var c = document.getelementbyid(records[0].data.firstname);             var ctx = c.getcontext("2d");             ctx.fillstyle = "#ff0000";             ctx.fillrect(0, 0, 150, 75);         });         var canvasarray = cmp.element.dom.getelementsbyclassname('drawcanvas');         ext.array.each(canvasarray, function(canvas, index) {             var ctx = canvas.getcontext("2d");             ctx.fillstyle = "#ff0000";             ctx.fillrect(0, 0, 150, 75);         });     },     'select': function(cmp, record, eopts) {         console.log('select');         var store = cmp.getstore();         var no = math.round(math.random() * 100);         var name = 'te' + no;         store.add({             firstname: no,             lastname: 'maintz'         });         cmp.refresh();     } } });