Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    nathanj is on a distinguished road

      0  

    Default infinite carousel scrolls past end of items to empty page

    infinite carousel scrolls past end of items to empty page


    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!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    nathanj is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    We'll take a look.

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    New York, NY
    Posts
    52
    Vote Rating
    3
    roycyang is on a distinguished road

      0  

    Default


    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
    Code:
    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.

  7. #7
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


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

    Code:
    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:

    Code:
    Ext.define('My.view.InfiniteCarousel', {
        extend: 'Ext.carousel.Infinite',
    
    
        config: {
            // ...
    
    
            listeners: {
                itemindexchange: 'onItemIndexChange'
                // ...
            }
        },
    
    
        onItemIndexChange: function(me, item, index) {
            // ...
    
    
            if (thisIsTheLastIndex) {
                this.setMaxItemIndex(index);
            }
    
    
            // ...
        }
    });
    Sencha Touch Lead Architect

  8. #8
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Quote Originally Posted by Jamie Avins View Post
    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?