Sencha Touch 2 carousel.setItems() 不工作答案

【问题标题】：Sencha Touch 2 carousel.setItems() not workingSencha Touch 2 carousel.setItems() 不工作
【发布时间】：2012-07-23 18:06:59
【问题描述】：

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

谢谢，

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

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'

【问题讨论】：

标签： sencha-touch-2 sencha-architect

【解决方案1】：

如果您的变量 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
});

希望这有帮助

【讨论】：

当您通过 Architect 创建侦听器时，它会将容器作为第一个参数，并且似乎没有办法更改它，除非通过 Architect 之外的代码。我这样做了并且能够克服错误，但是图像仍然没有添加到轮播中，尽管我现在在屏幕上看到了轮播。如果这对任何edspencer.net/2012/02/… 有帮助，我已遵循此示例
这只是一个变量名，所以如果 Architect 将其命名为“容器”，那么在您的代码中使用容器。另请参阅我编辑的答案。
再次感谢，我应用了您的更新，但仍然无法显示图像。我试图通过调用 carousel.doLayout() 和 Ext.getCmp('carousel').doLayout(); 来强制更新在 setItems() 之后但得到 Object # has no method 'doLayout' 的错误。不知道是什么问题
ST2 中不再存在此功能。在尝试之前阅读文档。
doLayout() 有各种渲染时间的疯狂，你应该尽量不要使用它。

【解决方案2】：

试试这个代码

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

myCarousel 是 carousel 的对象。

【讨论】：

【解决方案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') + '"/>'
                });
            }
        });
 });

希望对您有所帮助...

【讨论】：