tpl inside combined items - sencha-touch

Question

I want a carousel panel in the detailview of a list. I put the carousel with a flex 3 inside a panel. With this code I make sure the tpl inside the panel items will work. But I don't know how to fix the problem with the carousel.
Code for tpl inside panel items:
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData); this.getAt(1).setData(newData);
}
complete code of my WorkDetail.js
Ext.define('Portfolio.view.WorkDetail', {
extend: 'Ext.Panel',
xtype: 'workdetail',
requires: [
'Ext.carousel.Carousel'
],
config: {
xtype: 'panel',
layout: 'hbox',
align: 'stretch',
styleHtmlContent: true,
scrollable: null,
items: [
{
flex:3,
xtype: 'carousel',
// HERE THE TLP WORKS
// tpl: '<img src="{bigImage1}"></img>',
// style: 'background-color: #456370;',
items: [
{
// TPL DON'T WORK
tpl: '<img src="{bigImage1}"></img>',
style: 'background-color: #E84F17;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage2}"></img>',
style: 'background-color: #4DBAB6;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage3}"></img>',
style: 'background-color: #BBB399;',
}
]
},
{
// HERE THE TLP WORKS
flex:1,
tpl: '<p>{workDiscriptionLarge}</p> <p>{workDate}</P> Bekijk de website'
}
]
},
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData);
this.getAt(1).setData(newData);
}
});

Answer 1

this.down('component').setData(newData);
this.getAt(0).setData(newData);
These two lines will target your Carousel item and so won't populate the templates of the sub-items.
this.getAt(1).setData(newData);
This line will target the second item where you see the template working.
You will need to target each of the Carousel items individually and call the setData method of each for the templates to be populated.
// untested :)
var components = this.getAt(0).query('component');
for(var i = 0; i < components.length; i++){
components[i].setData(newData);
}