Carousel - Problems to add items dinamically into a existing carousel

[jmendez88]

Hello,

I have a carousel in a view, and i want to add items into the carousel. In my controller I get de carousel, and I use the add method to add items, but the new information is not showed.

After that, y press F5 and it works.

My view:

Ext.define('App.view.name',{
extend: 'Ext.Panel',
alias: 'widget.carouselView',
config: {
              ....,
              items: [
                           {
                                 xtype: 'carousel',
                                 cls: 'carrusel-imagenes-ofertas',
                                 indicator: true,
                                  items: [
                                  ]
                           }
             ]
   }
});

My controller:

refs: {
           ......,
           myCarousel: 'carouselView carousel', 

},
methodName: function() {
   var myCarousel = this.getMyCarousel();
   myCarousel.removeAll(true);
   var panelTmp = Ext.create('Ext.Panel', {
      html: '<img alt="" src= "<img_path>"/>'
   });
            
   myCarousel.add(panelTmp);
   myCarousel.setActiveItem(0);

}

Thanks,

[the_Chameleon]

hello,

it's because your ref is not good.

define id in your view :

xtype: 'carousel',
id : 'carouselPanel'
cls: 'carrusel-imagenes-ofertas',
indicator: true

Then, change your ref

refs: {
           ......,
           myCarousel: '#carouselPanel',  // add '#' because it's an id


},
methodName: function() {
var myCarousel = this.getMyCarousel();
}

see controller guide : http://docs.sencha.com/touch/2-1/#!/guide/controllers

good luck

[bricemason]

This example of dynamically adding items to a carousel works.

name.js (view)

Ext.define('App.view.name', {
   extend: 'Ext.Panel',
   xtype: 'carouselView',


   requires: [
      'Ext.carousel.Carousel'
   ],


   config: {
      layout: 'fit',
      items: [
         {
            xtype: 'carousel'
         },
         {
            xtype: 'button',
            text: 'add',
            action: 'add',
            docked: 'bottom'
         }
      ]
   }
});

Main.js (controller):

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


   config: {
      refs: {
         myCarousel: 'carouselView carousel'
      },
      control: {
         'button[action=add]': {
            tap: 'handleAddButtonTap'
         }
      }
   },


   handleAddButtonTap: function(btn) {
      var c = this.getMyCarousel();


      c.add({
         xtype: 'panel',
         html: new Date(),
         layout: 'fit'
      });
   }
});

Try this out and see if it works for you. If not, please describe more about your situation. When does the method that dynamically adds items to the carousel run?

Brice

[jmendez88]

Hello Brice,

I tried it, but it didn't work, so I attach my example (without sencha sdk).

¿Could you help me?

Thank you ver much.

[jmendez88]

I changed the type of the Main view. I have used a NavigationView and I have solved the problem.