Dynamic Carousel updating content

[gugalicious]

Hello everyone,

I've just started learning sencha touch. I've a data store that I populate based on the user's location and then user will be able to to an other tab and which provides a listPanel of all the results. Now this list is a splitview and clicking on each list item, I need to generate a carousel and insert dynamic content into. I'm able to update the content when I just have a tpl (template), but the moment I put a xtype of carousel, I don't see anything on the screen and there are no errors as well. Below is my code:


var listPanel = new Ext.List({
id: 'indexlist',
store: listStore,
allowDeselect: false,
singleSelect: true,
scroll: 'vertical',
width: '20%',
dock: 'left',
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
});

listPanel.addListener('selectionchange', function (model, records) {
if (records[0]) {
contentPage.update(records[0].data);
contentPage.doLayout();
console.log(records[0].data);
}
});

//below is the code for the carousel
var contentPage = new Ext.Panel({
cls: 'cards',
//styleHtmlContent: true,
//tpl: "<h2>{firstName} hello how are you </h2>{lastName}. ",
//scroll: 'vertical',
layout: {
type : 'hbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [
{
xtype : 'carousel',
ui : 'light',
direction: 'horizontal',

items: [
{
tpl: "<h2>{firstName} hello how are you </h2>{lastName}.",
cls : 'card card1'
},
{
tpl: "<h2>{firstName} hello how are you </h2>{lastName}.",
cls : 'card card2'
},
{
tpl: "<h2>{firstName} hello how are you </h2>{lastName}.",
cls : 'card card3'
}
]
}
],
layout: 'fit',
width: '80%',
});


Thanks in advance!! Sorry I'm unable to get the indentation right on this editor!

[mitchellsimoens]

So all you want to do is add items to a carousel?

[gugalicious]

Yes, I want to add pages to the carousel and the pages need to take the template data that is passed from the listPanel!

[mitchellsimoens]

Ok... so


carousel.add({
tpl : '......'
});

And then you can use update method on that page and pass in a data object.

[gugalicious]

and what's wrong with what I'm doing?? I've the template defined in the carousel and I'm passing the object

[mitchellsimoens]

Are you using the update method on the carousel or on the page you want to update? It needs to be done on the page not the carousel.

[gugalicious]

I'm updating on the page panel on the list item click as shown below. The carousel doesn't show up. I tried taking out the template from the carousel and put a html item and it still doesn't show up. So, I'm not sure whats going on!



listPanel.addListener('selectionchange', function (model, records) { if (records[0]) { contentPage.update(records[0].data); contentPage.doLayout(); console.log(records[0].data); }});