Question

使用Sencha Touch Framework的Carousel组件时遇到问题。我从一个简单的Panel扩展了一个组件，它执行以下操作：

    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可见时，Carousel的内容没有显示，虽然我可以通过浏览器的开发者工具看到生成的标签。

官方Carousel演示在我的浏览器中工作正常，如果我用Panel替换Carousel，它的内容也是可见的，所以其余的代码应该是正确的。你能帮我解决这个问题吗？

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();

我知道旋转木马组件很难理解，因为我也花了好几个小时，但我相信你会在你更努力的时候管理。

Text.Carousel的内容不可见

2 个答案: