Ext.Carousel的內容不可見

我在使用Sencha Touch Framework的Carousel組件時遇到問題。我已經從一個簡單的面板擴展一個組件，它執行以下操作：Ext.Carousel的內容不可見

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

不幸的是，當我提出這個面板可見，未顯示旋轉木馬的內容，但我可以看到所生成的標記與開發商我的瀏覽器的工具。

官方的Carousel演示在我的瀏覽器中工作正常，如果我通過Panel替換Carousel，它的內容也是可見的，所以其餘代碼應該是正確的。你能幫我解決這個問題嗎？

來源

2010-09-19 fhenneke

我不知道你面臨的實際問題是什麼，但它不應該在你發佈的代碼中。因爲我剛剛在jsfiddle.net/r423w這裏進行了測試，並且您的代碼工作正常（甚至隱藏面板並稍後顯示）。

來源

2010-09-20 23:41:03

我現在發現，除非面板有適當的佈局，否則不可能將旋轉木馬嵌套在面板中。在我最小的例子中，外板沒有佈局，所以它不起作用。 – fhenneke 2010-09-21 17:03:14

如果您有物品，面板總是需要佈局。您可以在Panel的API介紹中查看：http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel 如果您不需要此問題的更多答案，您可以接受答案最符合你的需求，或者自己寫一個答案，這是讓社區知道這是解決:) – 2010-09-21 17:36:47

我建議你把你的傳送帶內容放在面板上。

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

，並在完成推卡後做以下

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

我知道旋轉木馬組件是很難搞清楚，因爲我還上花了幾個小時，但我敢肯定你會管理時你更加努力。

來源

2011-11-01 09:37:57

Ext.Carousel的內容不可見

回答

相關問題