PDA

View Full Version : [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.



Mphasize
28 Jun 2010, 2:38 AM
Hello,
I had a problem with the Carousel component after I removed all the items (removeAll(true)) and dynamically loaded new items into the Carousel, because the indicator index was still pointing to a card position which did not exist anymore.
My Quick&Dirty Fix: Check if the indicator index exists, and if not switch to index 0. See code snippet below.

(ext-touch.js)


Ext.Carousel.Indicator = Ext.extend(Ext.Component, {
[...]
onCardSwitch: function(carousel, card, index) {
if(this.indicators[index]) {
this.indicators[index].radioClass('x-carousel-indicator-active');
} else {
this.indicators[0].radioClass('x-carousel-indicator-active');
}
}
[...]
}Cheers!
M

Mphasize
28 Jun 2010, 3:00 AM
Well, if there's no card in the carousel yet, my quick fix with index 0 will also cause trouble. Now I use the code without the default behaviour and just check if the index I want to switch to exists.

This means, that I have to use setActiveItem() after loading new data into the Carousel in order to get a correct indicator display again.

xantus
28 Jun 2010, 11:07 AM
Thanks. I opened a ticket for this issue.

TommyMaintz
28 Jun 2010, 1:31 PM
In the refactor I did for the Carousel I fixed this issue.

In order to achieve what you are trying to do I used the following code


carousel.removeAll(true);
carousel.add(items);
carousel.doLayout();
carousel.setCard(0);


Expect this to be available in the next release.

achapman
1 Jul 2010, 6:58 AM
Thanks guys. I ran into this issue after upgrading to .91 and the setCard() function fixed it for me.

Mphasize
1 Jul 2010, 11:31 AM
Hi again,

I updated to .91 today too and had another issue with this function, so....

Here's what I try to do: I want to update the Carousel items with an Ajax Call, and while I'm waiting for the callback to fire, I don't want the users to see the old content anymore. So I use .removeAll(true) when I begin the Ajax request, but I have .add(), .doLayout(), and .setCard(0) in the callback function.

Now, after removeAll() somehow an onCardSwitch event with the index -1 is fired, which satisfies the Ext.number check, but reports an error on if( this.indicators[index] ).

I fixed this by checking that the index is >= 0.

In ext-touch.js it now looks like this:


onCardSwitch: function(card, old, index) {
if (Ext.isNumber(index) && index >= 0 && this.indicators[index]) {
this.indicators[index].radioClass('x-carousel-indicator-active');
}
}
Still, I guess that the better solution would be to prevent the event from firing with an index of -1 in the first place.

Greetz!
M

xantus
1 Jul 2010, 11:41 AM
Thanks. Fixed. You can use an override to fix that until next release.