dynamically creating carousel using sencha touch2

Question

I have the following sample MVC application trying to dynamically creating carousel with image source being obtained from some remote url,when i execute the application i don't see any images being appended to my carouselview,please can any one highlight where i am going wrong?

Model Code:

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;
                }
            }
        ]
    }

});

Store Code:

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 Code:

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

View code:

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 Code:

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

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-05-19T22:45:23

Could be more specific about what doesn't work. Try to add console.logs in your code and give us the results, like the size the items at the end end of Ext.each of stuff like that.

My first idea would be to use the callback function of 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);
});

Hope this helps

dynamically creating carousel using sencha touch2

1 Answers