Sencha Touch - How to enable the Infinite Scroll

Question

In “Documents for Sencha Touch” there is a view in the “List” widgets, which allows you to set “infinite”, which provides infinite scrolling.

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

I hope this solves some of the problems that I have with performance with very large lists on portable devices.

Important Note. This is for a standalone mobile application. Like a violin. The storage already contains all the data.

I tried to include it in 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 jsFiddle.

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

Answer 1

, , . , , infinite, true, .

, infinite config. , config infinite , ( ). true, . . , infinite true, , , , .

, . , , vbox:

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
        }]
    }]
}

. Overnesting - , . , , :

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
    }]
}

, MyApp.view.MyIssue. , 100% , , , , infinite, true. Sencha Fiddle, : https://fiddle.sencha.com/#fiddle/11v1

, , ( , DOM, , DOM, ), vbox 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
        }]
    }]
}

variableHeights . . , , , .

Answer 2

, infinite: true . , , . ,

• , , , limit, start, pageSize ..

• , store , pageSize, buffered ..

, pagination. infinite: true sencha.

Answer 3

. , .

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

You can realize the idea. Create 2 stores, fully loaded, and the second will load only with some page size. 10. You will use the second store in your grid and implement the list swap plugin, as well as transfer the second store. You can help with this example violin. (this example is in Ext jS 5, but the logic will be the same)

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

Please try this and let us know.