Question

我正在尝试使用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'

Answer 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 });

希望这有帮助

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

希望这会对你有帮助......

Sencha Touch 2 carousel.setItems（）不起作用

3 个答案: