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

      0  

    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?

    InfiniteScroll.jpg
    Code:
    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
                            });
    
                            Ext.Ajax.request(request);
    
                            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
    Location
    Sweden
    Posts
    36
    Vote Rating
    0
    JambaFun is on a distinguished road

      0  

    Default


    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:
    http://www.sencha.com/forum/showthre...rolling-in-4.1

    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..."