Recreated active item doesn't get added to any container

Question

I've encountered this in a couple spots in my app:

Let's assume I have 3 items in a carousel. I'm viewing item #2. I need to reload that carousel, so I do the following operations:

Ext.getCmp('carousel_name').removeAll();
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs; this is the same code that was used to create the objects the first time, so it is likely not the issue)
Ext.getCmp('carousel_name').add(new_objects);

In the carousel object items list (Ext.getCmp('carousel_name').getItems()), all three items exist. However, only #1 and #3 (the ones which weren't the active item prior to the carousel reload) actually appear. #2 presents a blank white screen, and in the HTML nothing exists except for the item shell markup (no code that I've written shows up). If I do Ext.getCmp('carousel_item_2').show();, the item does appear, but is full-screen, and I get the error:

[DEPRECATE][Ext.Panel#show] Call show() on a component that doesn't currently belong to any container. Please add it to the the Viewport first, i.e: Ext.Viewport.add(component);

When I try to manually add that item to either the Viewport or the carousel, nothing is fixed.

I've tried inserting a dummy item in-between removal and reinsertion of new items, that doesn't work. Nor does hiding the entire Viewport before doing any of this and showing it afterwards. Nor does using setItems() rather than add(). Nor does doing Ext.getCmp('exercises_carousel').each(function(item){ item.destroy(); }) rather than removeAll(true)

I don't believe the issue is the code snippet that re-creates the new items, since it's the same code that's used to create the items the first time, and there are no issues on the first creation.

Pretty stumped here.

EDIT: I've found that if, when I get to the end of the carousel, if I add a empty item after the last item in the carousel, I don't get the blank item at N-2. No clue why this is the case. Still not a real solution, it's a hack.

Answer 1

Assuming there are no problems in your code snippet to re-populate new items in your carousel, then the only problem is because of this issue (I'm not sure whether it's a bug in Sencha Touch 2.1 or not but it does exist): when you call yourCarousel.removeAll() and add some new items again, your carousel will NOT set proper active item.

I've seen a similar problem and I added this after adding new items, which works:

carousel.setActiveItem(0);

Answer 2

Alright, this is a hack, so if anyone has a legitimate solution, that would be awesome. But the hack does work, so here it is:

• Add an empty item in the carousel
• Set active item to the new empty carousel item
• Destroy all carousel items
• Recreate (and re-add) all of the items

In code:

Ext.getCmp('carousel_name').add({});
Ext.getCmp('carousel_name').setActiveItem(Ext.getCmp('carousel_name').getMaxItemIndex());
Ext.getCmp('carousel_name').removeAll(true);
var new_objects = (bunch of code that recreates the carousel's objects again, with the same IDs)
Ext.getCmp('carousel_name').add(new_objects);

EDIT: As it turns out, this for some reason works 90% of the time; for some unknown reason 10% of the time it still doesn't get inserted. The only way to guarantee that all items get inserted correctly is to clear the entire viewport (Ext.Viewport.removeAll(true)), recreate all of the original items in the viewport, and reinsert them. I'd rather not have to do this every time an item doesn't get inserted.