Content of Ext.Carousel ist not visible

Question

Hello!

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).