画布被清除时，添加数据存储在Sencha触摸列表

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

本文关键字：存储 Sencha 触摸 列表 数据 添加 清除      更新时间：2023-09-26

我有一个Sencha Touch Ext.List，它有一个html5画布。每当我向存储中添加任何项目时，canvas元素就会丢失。

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

有没有办法在不影响画布的情况下动态地将记录添加到Ext.List中?

这个问题是由于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();
    }
}
});
相关文章：