PDA

View Full Version : Dynamic Carousel updating content



gugalicious
10 Jan 2012, 12:04 PM
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
10 Jan 2012, 1:01 PM
So all you want to do is add items to a carousel?

gugalicious
10 Jan 2012, 1:09 PM
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
10 Jan 2012, 1:14 PM
Ok... so


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

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

gugalicious
10 Jan 2012, 1:32 PM
and what's wrong with what I'm doing?? I've the template defined in the carousel and I'm passing the object

mitchellsimoens
10 Jan 2012, 1:35 PM
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
10 Jan 2012, 2:20 PM
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); }});