Sencha Touch load only a few rows with pageSize config

Question

I have a store that is huge, (thousands of rows), and in order for my app to run faster I would like to set a max page Size to load when the app is first opened. Then only display the rest of the data of the user scrolls down. Here is what I have so far:

    Ext.define("myApp.store.foo", {
    extend : 'Ext.data.Store',

    requires : ['Ext.data.Store', 'myApp.model.foo', 'Ext.data.reader.Xml'],

    alias: 'myApp.store.approachMainStore',


    config: {
    model : 'myApp.model.foo',
    storeId: 'mainStore',
    autoLoad: true,
    pageSize: 50, 

    proxy : {
        type : "ajax",
        url : 'resources/images/data/bar_all.xml',
        reader : {
            type : "xml",
            pageParam: 'page',
            clearOnPageLoad: false, 
            rootProperty : 'foo',
            record : 'bar'
        }
    }

    }
});

I'm using a xtype of List. But when I run my app everything works except it loads all the data just as before I added pageSize: 50, What am I missing?

Running Sencha Touch 2.4.1

Answer 1

You should use ListPaging plugin in the list.

 {
        xclass: 'Ext.plugin.ListPaging',
        autoPaging: true,
        loadMoreText : 'Loading more',
        noMoreRecordsText : 'loaded'
 }

Please check sencha touch documentation for further info.