Set page size Sencha touch

Question

I've been trying to set a page size so that my app runs faster. I'm reading from a huge xml file (thousands of rows) and I want to use the ListPaging plugin to load only one 'page' at a time.

Here is my list:

                                            xtype : 'list',          
                                            plugins: {
                                                xclass: 'Ext.plugin.ListPaging',
                                                autoPaging: true,
                                                loadMoreText : 'Loading more...',
                                                noMoreRecordsText : 'loaded'
                                            },
                                            store : 'mainStore',
                                            height : '100%',
                                            layout : 'fit',
                                            id: 'myList',
                                            flex : 5,
                                            itemTpl : "foo"

Here is my store:

config: {
model : 'myApp.model.foo',
storeId: 'mainStore',
autoLoad: true,
//currentPage: 1,
//buffered: true,
pageSize: 15,

proxy : {
    type : "ajax",
    url : 'resources/images/data/fooBar.xml',
    startParam: 'offset',
    reader : {
        type : "xml",
        rootProperty : 'foo',
        record : 'bar'
    }
}

}

However when I run this, all I get is 'loading more...' text at the bottom of the entire list (not 15 items down), and then it only loads the same xml data again, but this time just concatenates it to the end of the entire 'list'.

How do I set the page size so that I only get 15 or so items to display per 'page', then when I scroll to the bottom of the list (that's 15 items long) I get the next 15 items concatenated to the last 15 items to make a total of 30 items display.. and so forth.

Using Sencha Touch 2.4.1

UPDATE: Here is the config:

config: {
model : 'c17App.model.approaches',
storeId: 'mainStore',
autoLoad: true,
pageSize: 15,

proxy : {
    type : "ajax",
    url : 'resources/images/data/approach_all.xml',
    total:  17,
    start: 1,
    limit: 15,
    reader : {
        type : "xml",
        rootProperty : 'approaches',
        record : 'approach',
        totalProperty: 'total'//maybe needs to be a number?
    }
}

}

Could you provide full example? You can use fiddle.sencha.com — Baidaly

Anand Gupta Anand Gupta · Accepted Answer · 2015-03-25T06:49:24

From the scenario which you have provided, it seems your web-services are not according to Sencha's ListPaging plugin. pageSize is being correctly used by you in store config .

config: {
    pageSize: 15,
    ......
}

Your API response should have following properties to support ListPaging:

total : This field/property will be coming with your API. With the value of this, the plugin decides whether the application has reached end of the list or not.
start: This is send by the plugin in the Headers and remote proxy will get to know that from which index position the data fetching will be initiated.
limit: This is nothing but your pageSize. It is also send by the plugin in the Headers and remote proxy will get to know that how many numbers of data data it should fetch fro the start index.

So check with your api response if it is having total, start and limit params or not. If it is there, just add this reader in your proxy:

reader: {
    type: 'xml', // 'json' if the api is giving response in json format
    rootProperty: 'xyz', // Depends on your api response.
    totalProperty: 'total'
}

And you problem will be resolved. Feel free to ask for any other clarification.

--------------------------------------EDIT-----------------------------------------------

'total', 'start' and 'limit' should come in the api response to support listpaging. You don't have to send it explicitly in your proxy(As you are sending in edited section)

Set page size Sencha touch

1 Answers