Sencha Touch - How to enable Infinite Scroll

Question

Looking in the Docs for Sencha Touch there seems to be an option on the List widget that allows for setting "infinite" which enables infinite scroll.

Docs: https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite

I am hoping this will resolve some issues that I have with performance with very large lists on portable devices.

Important Note: This is for an offline mobile app. As in the fiddle. The store already contains all of the data.

I tried enabling it on a large list but all it does is hide the data.

{
    xtype: 'list',
    store: 'contactStore',
    flex: 1,
    itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',

    infinite: true /* Setting this to true hides the list */
}

What am I missing? I have included a jsFiddle.

http://jsfiddle.net/AnthonyV/bba58zfr/

Answer 1

The issue here isn't anything about the data being loaded like the other answers. You have said the data is being loaded into the store just fine as when you don't have infinite set to true you can see the data.

First, let's discuss what the infinite config does. As Anand Gupta explained, the infinite config will only render the number of list items that can fit on the screen (plus some as a buffer for scrolling). If you don't have it set to true then the list will render all items and not manage a visible range. With all items rendered, the list can support auto sizing. However, when infinite is set to true , the list needs to know what size it has in order to calculate the number of visible rows it can render.

This is where the issue happens, the list doesn't have a full size set to it. You have the list nested in a container and that container uses vbox layout:

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: 'vbox',
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: false
        }]
    }]
}

This is technically overnesting. Overnesting is when you have nested a component within a container that doesn't need to be nested within the container. This is an unnested version of your code that should work as you want:

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'list',
        title: 'Big List',
        store: 'contactStore',
        id: 'simpleList',
        itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
        striped: true,
        infinite: true,
        variableHeights: true
    }]
}

What I did here is remove the container and had the list as a direct child of your MyApp.view.MyIssue navigation view. The navigation view uses card layout which will give each direct child 100% height and width and therefore allowing the list to calculate the number of rows it can render with infinite set to true . Here is a Sencha Fiddle to show this unnested list in action: https://fiddle.sencha.com/#fiddle/11v1

The other way, if you REALLY wanted the list to be nested in that container (the more you nest, the bigger the DOM since you have more components created and the bigger the DOM, the slower your app may respond) then you can give the container's vbox layout the align config:

config: {
    title: 'Big List Issue',
    fullscreen: true,
    items: [{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        title: 'Big List',
        items: [{
            xtype: 'list',
            store: 'contactStore',
            id: 'simpleList',
            flex: 1,
            itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
            striped: true,
            infinite: true
        }]
    }]
}

In the unnested list example, I also use the variableHeights config on the list. This allows the list items to be properly heighted. Run the fiddle with it commented out to see the difference it makes.

Answer 2

First you need to understand that infinite: true helps in improving list performance. It helps rendering only that chunk of list data which is the current page, rest are not rendered. So,

1. For pagination, you backend should support that like it should have parameter like limit , start , pageSize etc.

2. For implementing pagination, your store should have these configs like pageSize , buffered etc.

Hence if your backend support and you have implemented pagination . Then you can enjoy the benefit of infinite: true and get extreme sencha touch list performance.

Answer 3

You can go with this. Add this plugin, It handles automatically infinite scrolling.

http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging

For offline

You can implement an idea. Create 2 store one is fully loaded and second will load only with some page size suppose 10. You will use second store in your grid and implement list paging plugin, also pass here second store. You can take help with this fiddle example. (this example is in Ext jS 5 but logic will be same)

https://fiddle.sencha.com/#fiddle/pim

Please try this one and let us know.