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?

Answer 1

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.