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（）不工作

回答

相关问题