Items in Sencha Touch Carousel disappearing

Question

I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.

The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.

Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.

handler: function(b, e) {
    itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
    itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
    itemsCarousel.setActiveItem(1);
    itemsCarousel.remove(0, false);
}

Things I have attempted:

Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.

If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!

Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?

If you're comfortable using the console, make sure the carousel.items collection contains what you think it should before and after a click. Looking at the dom in the console might give a clue too. — Jason Freitas
@Jason, Thanks for the response. I checked the DOM both before and after the offending click and everything looks normal. Even after the click the DOM shows the carousel.items with the correct items, they're just not displaying correctly. I had some similar symptoms when I originally was using carousel.removeAll() and then tried to re-add items, but I moved onto this method because it worked for the time being. I feel like I'm close to whats wrong but I just can't nail it! — Ian

Ian Ian · Accepted Answer · 2011-03-28T23:42:35

Well, I figured out how to reproduce the functionality using a different method.

I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:

rootPanel
{
    carousel[0]
    {
        panel1
        panel2
    }
    carousel[1]
    {
        panel3
        panel4
    }
    ...
}

and I perform rootPanel.setActiveItem(x) to display the new carousel.

Items in Sencha Touch Carousel disappearing

1 Answers