Question

I don’t know how to add items in the last two lines of code below. Images from flickr are loading correctly. TR.view.photoset.Carousel.add(items) resulted the error message

“Uncaught TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method ‘add’ “

Ext.define('TR.view.photoset.Carousel', {
extend: 'Ext.carousel.Carousel',
alias: 'widget.photosetcarousel',
config: {
        store: 'PhotosetPhotos',
        itemTpl: '<img src="http://src.sencha.io/{[Ext.Viewport.getOrientation()]}/{photo_url}" />',
        title: 'Flickr Photoset',
        iconCls: 'hot',
        iconMask: true,

        scrollable: {
            direction: 'vertical',
            directionLock: true
        },          
},

initialize: function( me ) {
    var store = Ext.getStore('PhotosetPhotos');

    store.clearFilter(true);
    store.filter('photoset', '72157632230262446' );
    store.load();       

    store.load( function(pictures , operation ) {
        var items = [];

        Ext.each(pictures, function(picture) {
            if (!picture.get('photo_url')) {
                return;
            }

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

        // fill items into carousel above
     {???}.add(items);
     {???}.setActiveItem(0);
    });
}

});

Thanks for help …

Answer 1

I put the code to fill the items in the carousel into the main controller.

Ext.define('MY.controller.Main' , {
  extend: 'Ext.app.Controller',

    // define a reference to the mycarousel view
    refs: [
      {
        ref: 'mycarouselView',
        selector: '#mycarousel'
      } 
    ],

    // let the control call the init function of the carousel
    init: function() {
      this.control( {
        '#mycarousel': {
           initialize: 'initMycarousel'     
        }
      });   
    },

    // then I can access the carousel view and fill it ...
    initMycarousel: function() {
      var carousel = this.getMycarouselView();
      var store = Ext.getStore('MycarouselPhotos');

      store.clearFilter(true);
      store.filter('photoset', '72157631990018061' );
      store.load();       

      store.load( function(pictures , operation ) {
      var items = [];

      Ext.each(pictures, function(picture) {
        if (!picture.get('photo_url')) {
          return;
            }

        items.push({
          xtype: 'image',
          src: picture.data.photo_url
        });             
      });

      // fill items into carousel
      carousel.setItems(items);
      carousel.setActiveItem(0);
 });

}