infinite carousel scrolls past end of items to empty page

[nathanj]

I'm trying to debug an issue with the infinite carousel where it will scroll past the end of the list of items in the data store and display empty pages if you continue to scroll to the right. In other words, if you swipe through the pages and get to the end of the available records, it displays empty content and does not snap back like you'd expect to signal to the user you're at the end of the list.

I've adapted my app from the TouchStyle demo which loads data into the store via jsonp. The activeItemChange and itemIndexChange events are being handled in app/view/ProductsList.js. From what I can tell by setting debug break points in these event handlers, everything is working properly and being loaded into the store. I just don't know how to signal the carousel that it has hit the end of the list of products and should not continue to scroll to the right and display empty content.

You can see this behavior in the TouchStyle demo app if you're patient enough to scroll all the way to the end of a list of products. I did this on an iPad where it was displaying 8 products on a page. It took a while, but when you get to the last page and swipe one more page past the end, you'll see a completely empty/white page.

Any ideas or feedback on how to fix this would be greatly appreciated.

Thanks!

[mitchellsimoens]

The infinite carousel is marked as private which is recommended you don't rely on it. I'm still going to open a ticket for this as we are using it.

[Jamie Avins]

As Mitchell alluded to, the infinite carousel isn't quite ready for primetime. We plan to have fully supported infinite Carousels and Lists in 2.1.

[nathanj]

Thanks for the replies and letting me know when to expect it to be updated.

In my app, I don't expect to have that many items in the store... like maybe 20 - 30 at the most.

I could just switch to a normal carousel given that number of items? Just trying to think of a workaround to use in the meantime.

Thanks again!

[Jamie Avins]

We'll take a look.

[roycyang]

Hi,

If you do a setMaxItemIndex() on the carousel, that will set the number of slides.

Remember to define your count inside your instance of the infinite carousel. I'm sure you are doing that or it would be breaking. Also a word of caution it looks like the current implementation shows count + 1 so if you don't catch that you will be losing some of your items or seeing the last item of panel 1 as the first item on panel 2

Var storeCount = store.data.length;
Var count = store.getCount();
Var maxPanels = parseInt(storeCount/count,10) // plus logic for the remainder
This.getNameOfPanel().setMaxItemIndex(maxPanels)

Something like that, works for me.

[Jacky Nguyen]

If you know the number of items up-front, set the 'maxItemIndex' config value (default is Infinity), for example:

Ext.define('My.view.InfiniteCarousel', {
    extend: 'Ext.carousel.Infinite',


    config: {
        maxItemIndex: 123
        
        // ...
    }
            
    // ...
});

Note that the value is index, not count, so if you have 10 items, the max index is 9.

You can also programmatically set 'maxItemIndex' at any given time later if the value is not known beforehand. A common use case is calling the setter inside the 'itemindexchange' listener:

Ext.define('My.view.InfiniteCarousel', {
    extend: 'Ext.carousel.Infinite',


    config: {
        // ...


        listeners: {
            itemindexchange: 'onItemIndexChange'
            // ...
        }
    },


    onItemIndexChange: function(me, item, index) {
        // ...


        if (thisIsTheLastIndex) {
            this.setMaxItemIndex(index);
        }


        // ...
    }
});

[hotdp]

As Mitchell alluded to, the infinite carousel isn't quite ready for primetime. We plan to have fully supported infinite Carousels and Lists in 2.1.

Hi,
Will it still be ready for 2.1 GA?