Содержимое Ext.Carousel не видно

Question

У меня проблема с использованием компонента Carousel в Sencha Touch Framework. У меня есть компонент, расширенный с простой панели, которая выполняет следующие действия:

    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];

К сожалению, когда я делаю эту панель видимой, содержимое карусели не отображается, хотя я вижу сгенерированные теги с помощью инструментов разработчика моего браузера.

Официальная демонстрация Карусели отлично работает в моем браузере, и если я заменю Карусель на Panel, ее содержимое также будет видно, поэтому остальная часть кода должна быть правильной. Можете ли вы помочь мне с этой проблемой?

Answer 1

Я не знаю, с какой реальной проблемой вы сталкиваетесь, но это не должно быть в коде, который вы разместили.Потому что я только что протестировал здесь на jsfiddle.net / r423w и ваш код работает (даже скрывая панель и показывая ее секунду спустя).

Answer 2

Мой совет вам поместить содержимое вашей карты карусели в панели.

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

и после того, как вы закончите нажимать карты, сделайте следующее

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

Я знаю, что компонент карусели трудносообразите, как я тоже потратил на это часы, но я уверен, что вы справитесь, когда будете давить сильнее.