[FIXED-110] Carousel indicator breaks down after changing carousel content.

[Mphasize]

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]

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]

Thanks. I opened a ticket for this issue.

[TommyMaintz]

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]

Thanks guys. I ran into this issue after upgrading to .91 and the setCard() function fixed it for me.

[Mphasize]

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]

Thanks. Fixed. You can use an override to fix that until next release.