Problem with dynamic carousel

[Shijutv]

Hi,

I have a question about carousel. I have a carousel and I'd like create its cards with real time data loaded from a server. The number of cards is unknown and determined by the real time data.
At first i have 2 cards . When i switch to next card , it will generate a JSON request and it updates the carousel .

But it is not working properly because i want to show the second card. it shows the third card
Problem is it removes the default 2 cards .

My code is below

carouselPhotoListView = new Ext.Carousel({
items: iGallery.stores.PhotoListCarouselViewItems,
layout: 'card',
listeners: {
beforecardswitch : {
fn: function(obj,newCard,OldCard,index,bool){
loadNext12Photos(albumId);
}
}
}
});

var loadNext12Photos = function(id){
Ext.getBody().mask('Loading...', 'demos-loading', false);
Ext.util.JSONP.request({
callback: function(result) {
iGallery.stores.PhotoListCarouselViewItems.push({result.data1})
Ext.getBody().unmask();

carouselPhotoListView.add(iGallery.stores.PhotoListCarouselViewItems);
carouselPhotoListView.doLayout();
}
}

Thank you in advance!

[Ryan Watkins]

I have the same issue. I can render the carousel initially and even populate it dynamically, but am unable to successfully have it render a new set of items.

I've attempted carousel.removeAll(), and then carousel.add(items). But in all cases the carousel will create the necessary items but not render them.

I intialize the carousel with an empty item array, and then later call carousel.add(items) and it works - the first time. But not subsequent times for this same carousel. I can see the dots for the correct number of items, and can slide between the pages, but the contents of each page do not render.

This repros Chrome, Safari and Mobile Safari. Sencha Touch 1.1.0.

[brett.gates]

I am being paid for this project and dev has stopped because I do not know how to get past this. Even better if you look at the console and drill down into the carousel the cards show the correct content. Just does not render it on the screen.

 	buildCarousel: function(){
	 	var item_object = DataUtils.item_object(this.selectedListId, this.selectedItemId);
	 	console.log(item_object);
 		if(item_object){
 			var container = Ext.getCmp('Entries_Container');
 			
			var m = item_object.metadata;
			var name = m.name;
			container.dockedItems.items[0].setTitle(name);
			container.dockedItems.items[0].doComponentLayout();
			
// Build the Header
			var aHTML = [];
			if(m.requirements.require_min == 0){
				aHTML.push("optional<br />");
				aHTML.push(item_object.completed.completed_order.length.toString() + " completed entries.");
			}
			else {
				aHTML.push("Minimum entries required: " + m.requirements.min.toString());
				aHTML.push("<br />Number of completed entries: " + item_object.completed.completed_order.length.toString());
			}
			container.dockedItems.items[1].html = aHTML.join("\r\n");
			container.dockedItems.items[1].doComponentLayout();
			
			container.items.removeAll();
//Build the Carousel
			this.carouselCount++;
			var carousel = new Ext.Carousel({
				layout: 'card',
				id: 'Entries_Carousel_' + this.carouselCount
			});
			container.carouselId = carousel.id;
			
			var items = [];
			for(var i = 0; i < item_object.completed.completed_order.length; i++){
				var completedId = parseInt(item_object.completed.completed_order[i]);
				var completed_object = DataUtils.completed_object(this.selectedListId, this.selectedItemId, completedId);
//var cItem = new Ext.Panel({html: App.views.Entries.prototype.completedEntryViewHTML(completed_object)});
				var cHTML = container.completedEntryDisplayHTML(completed_object);
				var card = new Ext.Panel({
					scroll: 'vertical',
					html: cHTML
				});
				items.push(card);
			}
			carousel.add(items);
			carousel.doComponentLayout();
			container.add(carousel);
			container.doComponentLayout();
		}
			
 	}

The title on the toolbar does change.

HELP!!!

[Ryan Watkins]

I've resolved this - unfortunately by using a timeout.

So I call carousel.removeAll();

Then setTimeout(function() {
carousel.add(items);
carousel.doLayout();
}, 10);

[janelle]

Note: make sure you don't use "this" inside the setTimeout.

// note: currently in the carousel
this.removeAll(true);
carousel = this;


setTimeout(function(){
	carousel.add(items);
	carousel.doLayout();
}, 10);

// display the carousel
wrapperPanel.setActiveItem(carousel);


// set second card as active item
carousel.setActiveItem(1);