Move items from store to carousel

[sealpond]

I have manage to use a listener to fetch the data i want from a store but cant figure out how to move it to the carousel i defined. Ive looked at the examples in the download files that comes with sencha but cant change my code to match it. Can anyone point me in the right direction?

My view:

var carousel = Ext.define('App.view.Products', {
  extend: 'Ext.Carousel',
  xtype: 'productspage',
  
  config: {
    title: 'Product',
    iconCls: 'star',
    defaults: {
      styleHtmlContent: true
    }
  }
 });


var myStore = Ext.create('Ext.data.Store', {
  model: 'App.model.Event',
  autoLoad: true,
 
  proxy: {
    type: 'scripttag',
    url : url
  },
  listeners: {
    load: function(store, records, index) {
      items = [];
      for (var i=0; i<records.length; i++) {
        items.push({
          xtype: 'image',
          cls: 'my-carousel-item-img',
          html: '<img src="' + records[0].data.event_image + '">'
        });
      }
     }
  }
});

[mitchellsimoens]

So after your for loop in the store's load listener is where you would either create the carousel or if the carousel is already created then you can simple add the items array to the carousel.

[sealpond]

So after your for loop in the store's load listener is where you would either create the carousel or if the carousel is already created then you can simple add the items array to the carousel.

im a bit lost on how to add the items. Do i have to write an function in the carousel to recive the items? and then use something like carousel.add(items). Are there any examples on how to do that i can check? I really want to understand this setup

[mitchellsimoens]

If you have the carousel already created, then right after your for loop you can do this:

carousel.add(items);

items can be a single object or an array of objects like in your case.

If the carousel is not created then you need to create the carousel:

new Ext.carousel.Carousel({
    items : items
});

Of course you may need fullscreen or add the carousel to a component or whatever your application needs.

[msweltzdk]

Looking at the code you supplied, I think I found an error in there somewhere. I think you should have the i (marked with red in the code below), to not just add the first record in your results to the array.

listeners: {
   load: function(store, records, index) {
      items = [];
      for (var i=0; i<records.length; i++) {
         items.push({
            xtype: 'image',
            cls: 'my-carousel-item-img',
            html: '<img src="' + records[i].data.event_image + '">'
         });
      }
   }
}

[sealpond]

Looking at the code you supplied, I think I found an error in there somewhere. I think you should have the i (marked with red in the code below), to not just add the first record in your results to the array.

listeners: {
   load: function(store, records, index) {
      items = [];
      for (var i=0; i<records.length; i++) {
         items.push({
            xtype: 'image',
            cls: 'my-carousel-item-img',
            html: '<img src="' + records[i].data.event_image + '">'
         });
      }
   }
}

thanks i totally missed that

[msweltzdk]

Np, I just hoped that it could clear some possible headaches in the future if you encountered any errors.