添加数据以存储在Sencha Touch List中时，画布已清除

Question

我有一个Sencha Touch Ext.List，其中有一个html5画布。 每当我向商店添加任何项目时，canvas元素都会丢失。

参考这个小提琴：-https: //fiddle.sencha.com/fiddle/74i/

有什么方法可以动态地将记录添加到Ext.List而不影响Canvas。

Answer 1

此问题是由于sencha touch 2.3.1 +版本中的错误所致。 此处的解决方法是在Ext.List中添加刷新侦听器事件，以在每次更新商店时重画画布。

修改如下：

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();
    }
}
});