динамическое создание карусели с использованием sencha touch2

Question

У меня есть следующее приложение 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' 
      } 
     } 
    } 
}); 

Controller Код:

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 в свой код и дать нам результаты, такие как размер элементов в конце End.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); 
}); 

Надеется, что это помогает