Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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