Adding canvas items dyanamically to Sencha Touch List

Below example can be tried on

http://docs.sencha.com/touch/2.0.2/#!/api/Ext.dataview.List

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 () {
console.log(‘calling refresh’);
},
‘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’
});
}
}
});

Advertisements

About sandesh

Developer
This entry was posted in Sencha Touch, Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s