1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating
    webfriend13 is on a distinguished road


    Default Problem with infinite scrolling grid

    Hi All,

    Please look at the below image & the code snippet.

    I have implemented infinite scroll & I am showing 100 records at a time. The problem is after scrolling for top 100 records, the system makes a call to get records number 101-200 and 201 - 300. But since the call is made after I see the initial 100 records, there is delay in getting further data & i could see empty area in my grid for a while. This is happening only for the first time. After that system gets the data in advance & I don't see any delay.

    I have tried showing more data 200 records at once but even that did not helped.

    My questions:
    1) How can I force the system to get the data (make an ajax call) after seeing 75 or 80 records instead of waiting for store to run out of data and the making a call?
    2) Am i missing any config entry or do i need to modify any config entry?
    3) Why there is a delay only for the first set of records?

    Ext.define('Ext.ux.data.proxy.Ajax', {
                        requires: ['Ext.util.MixedCollection', 'Ext.Ajax'],
                        extend: 'Ext.data.proxy.Ajax',
                        doRequest: function (operation, callback, scope) {
                            var writer = this.getWriter(),
                            request = this.buildRequest(operation, callback, scope);
                            if (operation.allowWrite()) {
                                request = writer.write(request);
                            Ext.apply(request, {
                                jsonData: jsonStr,
                                headers: this.headers,
                                timeout: this.timeout,
                                scope: this,
                                callback: this.createRequestCallback(request, operation, callback, scope),
                                method: this.getMethod(request),
                                disableCaching: false // explicitly set it to false, ServerProxy handles caching
                            return request;
                    store = new Ext.create('Ext.data.ArrayStore', {
                        id: 'store',
                        autoLoad: false,
                        buffered: true,
                        pageSize: 100,
                        fields: resultFields,
                        remoteSort: true,
                        proxy: Ext.create(Ext.ux.data.proxy.Ajax, {
                            type: 'ajax',
                            url: '/mdx/results',
                            actionMethods: {
                                create: 'POST',
                                read: 'POST',
                                update: 'POST',
                                destroy: 'POST'
                            extraParams: {
                                  connName: PA.common.Connection.getConnName()
                            reader: {
                                root: 'data',
                                type: 'array',
                                totalProperty: 'totalCount'
                        }) //End of proxy
                    store.guaranteeRange(0, 99);
                    //create the group feature to group the headers
                    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
                        groupHeaderTpl: 'Group: {name} ({rows.length})',
                        startCollapsed: true
                    //Prepare the grid
                    var grid = Ext.create('Ext.grid.Panel', {
                        id: 'resultgrid',
                        store: store,
                        enableColumnHide: false,
                        enableColumnMove: false,
                        columnLines: true,
                        columns: resultColumns,
                        viewConfig: {
                            stripeRows: true
                        features: [groupingFeature]
    Thanks in advance

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Vote Rating
    JambaFun is on a distinguished road



    Hi webfriend13,

    In you 4.1 you no longer need to use guaranteeRange. Set the store to autoLoad and you should be good to go. You can also use the verticalScroller config on the grid to set how many records outside of visible scope will be loaded.

    A lot more info here:

    One more thing, don't use grouping together with infinite scrolling. It's not supported afaik.

Thread Participants: 1

Tags for this Thread