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


    Default Problem with infinite scrolling grid

    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi