PDA

View Full Version : Carousel - Problems to add items dinamically into a existing carousel



jmendez88
29 Nov 2012, 3:54 AM
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
30 Nov 2012, 3:09 PM
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
30 Nov 2012, 8:34 PM
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
1 Dec 2012, 5:17 AM
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
1 Dec 2012, 12:54 PM
I changed the type of the Main view. I have used a NavigationView and I have solved the problem.