Question

我有以下示例MVC应用程序尝试动态创建旋转木马，图像源是从某个远程网址获取的，当我执行应用程序时，我没有看到任何图像被附加到我的carouselview，请任何一个突出显示我在哪里我错了？

型号代码：

Ext.define('Sencha.model.ImageModel', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'id', 'title', 'link', 'author', 'content',
            {
                name: 'image',
                type: 'string',
                convert: function (value, record) {
                    var content = record.get('content'),
                        regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/,
                        match = content.match(regex),
                        src = match ? match[1] : '';

                    if (src != "" && !src.match(/\.gif$/)) {
                        src = "http://src.sencha.io/screen.width/" + src;
                    }

                    return src;
                }
            }
        ]
    }

});

商店代码：

Ext.define('Sencha.store.ImageStore', {
    extend: 'Ext.data.Store',
    config: {
        model: 'Sencha.model.ImageModel',

        proxy: {
            type: 'jsonp',
            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20',

            reader: {
                type: 'json',
                rootProperty: 'responseData.feed.entries'
            }
        }
    }
});

控制器代码：

Ext.define('Sencha.controller.CarouselController', {
    extend: 'Ext.app.Controller',
    config:
        {
            init: function () {
                var carousel = Ext.getCmp('imagecarousel');
                Ext.getStore('ImageStore').load(function (pictures) {
                    var items = [];
                Ext.each(pictures, function (picture) {
                        if (!picture.get('image')) {
                            return;
                        }

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

                    carousel.setItems(items);
                    carousel.setActiveItem(0);
                });
            }
        }
});

查看代码：

Ext.define('Sencha.view.CarouselView', {
    extend: 'Ext.Img',
    id:'imagecarousel',
    xtype: 'apodimage',

    config: {
        /**
        * @cfg {apod.model.Picture} picture The Picture to show
        */
        picture: null
    },

    updatePicture: function (picture) {
        this.setSrc(picture.get('image'));
    }
});

App.js代码：

Ext.Loader.setConfig({
    enabled: true
});
Ext.require([
    'Ext.carousel.Carousel',
    'Ext.data.proxy.JsonP'
]);


Ext.application({
    name: 'Sencha',
controllers: ['CarouselController'],
stores: ['ImageStore'],
models: ['ImageModel'],
//views:['CarouselView'],
  launch: function () {
        Ext.create('Sencha.view.CarouselView');
    }
});

Answer 1

可以更具体地说明哪些不起作用。尝试在你的代码中添加console.logs并给我们结果，比如像Ext.each那样的东西的项目大小。

我的第一个想法是使用store.load的回调函数：

Ext.getStore('ImageStore').load(
  callback: function (pictures) {
  var items = [];
  Ext.each(pictures, function (picture) {
    if (!picture.get('image')) {
      return;
    }
    items.push({
      xtype: 'apodimage',
      picture: picture
    });
  });

  carousel.setItems(items);
  carousel.setActiveItem(0);
});

希望这有帮助

使用sencha touch2动态创建轮播

1 个答案: