Sencha Touch 2 carousel.setItems（）不工作

我想用Sencha Architect建立一個動態圖像輪播。我有一個旋轉木馬添加到選項卡面板。傳送帶設置爲從名爲「pictureStore」的商店讀取圖像。我有一個功能，可以從商店中提取圖像並創建輪播物品 - 我可以從商店獲取圖像，但無法創建輪播。當我嘗試使用carouself.setItems（）或carousel.add（）時，出現錯誤「Object＃has no method」。請看一下，讓我知道如果我的方法是不正確的創建一個動態輪播。我感謝您的幫助，以及如何解決Sencha Touch 2 carousel.setItems（）不工作

由於知識，

功能來讀取圖像，並創建旋轉木馬項目（工作，直到下面的評論）：

onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) { 
     Ext.getStore('pictureStore').load(function(pictures) { 
      var items = []; 

      Ext.each(pictures, function(picture) { 
       console.log(picture.get('image')); 
       if (!picture.get('image')) { 
        return; 
       } 

       items.push({ 
        xtype: 'myimage', 
        picture: picture 
       }); 
      }); 

      //following doesn't work for adding the carousel images: 

      //carousel.setItems(items); 
      //carousel.add(items); 
      //carousel.items = [{html: items}]; 
      //carousel.add(carousel.items); 
      //carousel.setActiveItem(0); 
     }); 
    },

樣品JSON與圖像信息

0123：使用carousel.add或carousel.setItems時

{ 
    "test": { 
     "cat": { 
      "entries": [ 
       { 
        "image": "/images/1.png" 
       }, 
       { 
        "image": "/images/2.png" 
       } 
      ] 
     } 
    } 
}

錯誤消息

來源

2012-07-23 Arkady

如果您的變量carousel沒有方法add或setItems那麼它可能不是您的傳送帶。

爲了確保這一點，您可以嘗試執行console.log(carousel);來弄清楚它到底是什麼。此外，它似乎沒有在您的代碼中的任何地方聲明...

但它很容易修復。我假設你已經爲你的輪播添加了一個監聽activate事件的事件監聽器，並且如果你看一下documentation for this event，你可以看到發送到回調函數的第一個參數是容器（在這個例子中是你的傳送帶）

所以，你必須寫的是這樣的：

onMycarouselActivate: function(carousel, newActiveItem, oldActiveItem, options) {

，而不是這個

onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {

，你應該是所有設置

編輯

此外，如果你在documentation for the image component看看，你可以看到有在配置沒有picture但有一個src屬性。所以，你應該寫：

items.push({ 
    xtype: 'myimage', 
    src: picture 
});

希望這有助於

來源

2012-07-23 20:06:36

當您通過架構師創建偵聽器時，它會將容器作爲第一個參數，除非架構師之外的代碼，否則似乎沒有辦法改變它。我這樣做，並能夠通過錯誤，但圖像仍然沒有添加到旋轉木馬，雖然我看到旋轉木馬現在在屏幕上。我遵循這個例子，如果這有助於任何http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html – Arkady 2012-07-23 21:00:39

這只是一個變量名，所以如果建築師將其命名爲「容器」，然後在代碼中使用容器。另請參閱我編輯的答案。 – 2012-07-23 21:07:58

再次感謝，我應用了您的更新，但仍無法顯示圖像。我試圖通過調用carousel.doLayout（）和Ext.getCmp（'carousel'）來強制更新。doLayout（）;在setItems（）之後，但得到Object＃的錯誤沒有方法'doLayout'。我不確定這個問題是什麼 – Arkady 2012-07-23 23:35:11

試試這個代碼

myCarousel.add({ 
        xtype: 'image', 
        scr:'path of image' 
       });

其中myCarousel是旋轉木馬的對象。

來源

2012-07-24 05:58:04

你可以試試這個，這是爲我工作.....

Ext.getStore('Pictures').load(function(pictures) { 

     Ext.each(pictures, function(picture) { 
      if (picture.get('image')) { 

       carousel.add({ 
         html: '<img style="max-width: 100%; max-height: 100%;" src="' + picture.get('image') + '"/>' 
       }); 
      } 
     }); 
});

希望這將幫助你...

來源

2013-09-18 05:09:30 rafi

Sencha Touch 2 carousel.setItems（）不工作

回答

相關問題