Sencha touch 使用sencha touch2动态创建旋转木马

Sencha touch 使用sencha touch2动态创建旋转木马,sencha-touch,extjs,sencha-touch-2,carousel,Sencha Touch,Extjs,Sencha Touch 2,Carousel,我有以下示例MVC应用程序试图动态创建旋转木马,图像源从某个远程url获取,当我执行该应用程序时,我没有看到任何图像被附加到我的旋转木马视图中,请任何一个突出显示我哪里出了问题 型号代码: Ext.define('Sencha.model.ImageModel', { extend: 'Ext.data.Model', config: { fields: [ 'id', 'title', 'link', 'author', 'conten

我有以下示例MVC应用程序试图动态创建旋转木马,图像源从某个远程url获取,当我执行该应用程序时,我没有看到任何图像被附加到我的旋转木马视图中,请任何一个突出显示我哪里出了问题

型号代码:

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

可以更具体地说明什么不起作用。尝试在代码中添加console.logs,并给出结果,比如Ext.logs末尾的项目大小,诸如此类

我的第一个想法是使用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);
});

希望这有帮助

可以更具体地说明哪些不起作用。尝试在代码中添加console.logs,并给出结果,比如Ext.logs末尾的项目大小,诸如此类

我的第一个想法是使用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);
});

希望这能有所帮助

谢谢你的回复,我正在尝试按照这个URL中显示的示例进行操作:,我稍微重构了代码,使我的app.js文件最小化,我引入了控制器并在其上编写了绑定函数,我只是想知道实现这一点的最佳方法是什么?我也有同样的问题,但无法获得解决方案,即如何使用动态数据创建旋转木马。请访问:感谢您的回复,我正在尝试按照此URL中显示的示例进行操作:,我稍微重构了代码以使我的app.js文件最小化,我引入了控制器并在其上编写了绑定函数,我只是想知道实现这一点的最佳方法是什么?我有同样的问题,但无法获得解决方案,如何使用动态数据创建旋转木马。请浏览: