Content of Ext.Carousel ist not visible

Question

I have a problem using the Carousel component of the Sencha Touch Framework. I have a component extended from a simple Panel that does the following:

    var cardItems = [];

    this.basicCard = new Ext.Component({
        scroll: 'vertical',
        html: 'Hello Carousel 1!'
    });

    this.basicCard2 = new Ext.Component({
        scroll: 'vertical',
        html: 'Hello Carousel 2!'
    });

    cardItems.push(this.basicCard);

    cardItems.push(this.basicCard2);

    this.carousel = new Ext.Carousel({
        items: cardItems
    });

    this.items = [this.carousel];

Unfortunately, when I make this Panel visible, the content of the Carousel isn't shown, though I can see the generated tags with the developer tools of my browser.

The official Carousel demo works fine in my browser and if I replace the Carousel by a Panel, it's content is also visible, so the rest of the code should be correct. Can you help me with this problem?

Answer 1

I don't know what is the real problem you are facing but it shouldn't be in the code you posted. Because I just tested here at jsfiddle.net/r423w and your code works (even hiding the panel and showing it a second later).

Answer 2

My advice to you to put your carousel card contents in panels.

this.cardItems = [];
this.cardItems.push(new Ext.Panel({
            styleHtmlContent: true,
            html: "Your HTML here"
        }));

and after you finish pushing cards do the following

this.carousel.add(this.cardItems);
this.carousel.doLayout();
this.doLayout();

I know carousel component is difficult to figure out as I also spent hours on it but I'm sure you'll manage when you push harder.