Sencha Touch limit number of items in list

Question

I'm building an app that should run on mobile/tablet/pc. And the main feature contains an enormous list of items that I'm getting from json file hosted on another server. Currently I'm working on a PC and the list takes about a minute to populate (over 800 objects, the number grows everyday), I'm guessing that's because it takes time to generate the markup for 800 divs...

Note: I'm working locally, when this is online it would be a nightmare, overkill..

My thoughts were to get all the data from json, but display limited amount of items in the list (let's say 30). But, to be able to search and filter all of them, and still display only 30 items MAX.

The below code is working, without the limit option I want:

        //model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'Name', type: 'string'},
                {name: 'Address', type: 'string'},
                {name: 'ID', type: 'int'},
                {name: 'WebUrl', type: 'string'},
                {name: 'InfoUrl', type: 'string'},
                ]
        }
    });
    //store
    store = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        },
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8088/Services/RestaurantList.ashx',
            reader: {
                type: 'json',
                rootProperty: 'users'
            }
        },
        autoLoad: true
    });

    //the list
    list = Ext.create('Ext.List', {
        flex: 2,
        itemTpl: ['<div class="contact">{Name}</div>'],
        store: store,
        listeners: {
                        itemtap: function(list, index, target, record) {
                            mainContainer.setActiveItem(1);
                            detailsPanel.setRecord(record);

                        }
                    },
        grouped: true,
/* maxVisibleRecords: 30,
limit: 30,
params: { limit: 30 },
ExtraParams: { limit: 30} */ //none worked
    });

Thanks! :)

Answer 1

Just add pageSize config to the store.

For sending a 'limit' param on the url that reads the json, set the limitParam config to the proxy.

You probably may like to use the listpaging list plugin, which adds a Load More built in functions.

Hope it helps-

EDIT:

//store
store = Ext.create('Ext.data.Store', {
    model: 'User',
    sorters: 'Name',
    grouper: {
        groupFn: function(record) {
            return record.get('Name')[0];
        }
    },
    proxy: {
        type: 'ajax',
        url: 'http://localhost:8088/Services/RestaurantList.ashx',
        reader: {
            type: 'json',
            rootProperty: 'users'
        }
    },
    autoLoad: true,
    pageSize: 30,
});

//the list
list = Ext.create('Ext.List', {
    flex: 2,
    itemTpl: ['<div class="contact">{Name}</div>'],
    plugins: [{type: 'listpaging'}],
    store: store,
    listeners: {
        itemtap: function(list, index, target, record) {
            mainContainer.setActiveItem(1);
            detailsPanel.setRecord(record);
        }
    },
    grouped: true,
});

Answer 2

I found a solution myself. I created two stores, the first one gets all the data from json, and I simply sliced that, and I set the sliced data to my second store. The search works perfect too, I can search through all the items in the "big" store, and display them in the second, also sliced (no more than 30 items)

here's the code:

        //model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        config: {
            idProperty: 'Name',
            fields: [
                {name: 'Name', type: 'string'},
                {name: 'Address', type: 'string'},
                {name: 'ID', type: 'int'},
                {name: 'WebUrl', type: 'string'},
                {name: 'InfoUrl', type: 'string'},
                {name: 'Answered', type: 'boolean'},
                ]
        }
    });


    //store

    aStore = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        }
    });

    //full store

    store = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        },
        proxy: {
            type: 'ajax',
            url: '/Services/RestaurantList.ashx',
            reader: {
                type: 'json',
                rootProperty: 'users'
            }
        },
        listeners:{
            load: function(){
                var all = store.data.all;
                aStore.setData(all.slice(0,30));
            }
        },
        autoLoad: true
    });


    //the list
    list = Ext.create('Ext.List', {
        flex: 8,
        itemTpl: ['<div class="contact">{Name}</div>'],
        store: aStore,
        listeners: {
            itemtap: function(list, index, target, record) {
                mainContainer.setActiveItem(1);
                detailsPanel.setRecord(record);

            }
        },
        plugins: [
            {
                xclass: 'Ext.plugin.PullRefreshFn',
                refreshFn: function(){
                    store.clearData();
                    aStore.clearData();
                    store.clearFilter();
                    aStore.clearFilter();
                    store.load();
                    list.refresh();
                }
            }
        ],
        grouped: true
    });