Sencha Touch 2 carousel.setItems() 不起作用

Question

我正在尝试使用 Sencha Architect 构建动态图像轮播。我在选项卡面板中添加了一个轮播。轮播被设置为从名为“pictureStore”的商店读取图像。我有一个功能可以从商店中提取图像并创建轮播项目 - 我可以从商店获取图像但无法创建轮播。当我尝试使用 carousel.setItems() 或 carousel.add() 时，出现错误“Object # has no method”。请看一下，如果我的创建动态轮播的方法不正确，请告诉我。我感谢您的帮助和有关如何修复的知识

谢谢，

读取图像和创建轮播项目的功能（直到下面评论为止）：

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

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

使用 carousel.add 或 carousel.setItems 时出现错误消息：

Object #<HTMLDivElement> has no method 'add' 
Object #<HTMLDivElement> has no method 'setItems' 

Answer 1

如果您的变量

carousel

没有方法

add

或

setItems

那么它可能不是您的轮播。

为了确保这一点，您可以尝试执行

console.log(carousel);

来弄清楚它到底是什么。另外，它似乎没有在代码中的任何地方声明...

但是修复起来非常简单。我假设您已经在轮播中添加了一个事件侦听器来侦听

activate

事件，如果您查看此事件的 文档，您可以看到发送到回调函数的第一个参数是容器（在这种情况下是你的轮播）

所以你必须写的是：

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

而不是这个

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

你应该已经准备好了

编辑

此外，如果您查看图像组件的文档，您可以看到配置中没有

picture

，但有一个

src

属性。所以你应该写：

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

希望这有帮助

Answer 2

试试这个代码

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

其中 myCarousel 是轮播的对象。

Answer 3

你可以试试这个，这对我有用：

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') + '"/>'
                });
            }
        });
 });