PDA

View Full Version : How did Carrousel change exactly in 0.9.3?



tijs
4 Aug 2010, 7:08 AM
I just upgraded my prototype to 0.9.3 and some things stopped working, as expected. I could fix most issues but i'm left with a rather weird issue with the carrousel where i instantiate it with a bunch of items and it only shows the first.

I'm building this super simple array of cards in a loop and then passing that as the items paramter to a new carrousel. In the previous version that was perfectly fine but now, while it does see all the items (i get a dot for each), when i slide to the next it's just an empty card. The html is there when i look at the generated source but it seems like it's hidden. Although i can't find out how through firebug.

creating a bunch of items:



var items = [];

Ext.each(delivery.looks, function(look) {

this.single = {
title: look.name,
html: "<div style=\"background: transparent url(/content/images/"+look.image+") no-repeat center 0; height: 100%; width: 100%; \"></div>"
}

items.push(this.single);

});


creating a basic carrousel:



this.carousel = new Ext.Carousel({
ui: 'dark',
defaults: { cls: 'look' },
items: items
});


The carrousel then ends up in a panel and thats it. nothing fancy i would think... :(

nosarious
4 Aug 2010, 7:52 AM
I had this happen too, but I found there were css changes as well.

make sure to include the 0.93 css file for the sencha framework you are using. (ie: debug.css if you are using debug.js)

cnelissen
4 Aug 2010, 10:13 AM
I'm experiencing the same issue... I have a carousel with 3 cards, and each are somehow hidden. They are present in the DOM, and don't have any display or visibility turned off, and are blocking correctly, not sure why they are hidden.



Ext.Modules.CarouselTest = Ext.extend(Ext.Carousel, {
items: [{
title: 'Ad 1',
html: '<img src="/temp_images/ads/ad1.jpg" width="320" height="320" alt="" />'
},{
title: 'Ad 2',
html: '<img src="/temp_images/ads/ad2.jpg" width="320" height="320" alt="" />'
},{
title: 'Ad 3',
html: '<img src="/temp_images/ads/ad3.jpg" width="320" height="320" alt="" />'
}],
initComponent: function() {
Ext.Modules.CarouselTest.superclass.initComponent.call(this);
}
});


Tested in Chrome 6, Safari 5.0.1, iPad, and iPhone.

Tried to upload a screenshot to demonstrate, but its giving some kind of error but no error message... I can provide one if someone wants it.

tijs
4 Aug 2010, 10:21 AM
@nosarious Awesome, it really was that simple! Thanks for the pointer.

@cnelissen my problem was caused by the wrong css file, maybe your problem will be solved the same way