Grid buffered/infinite scrolling in 4.1

[ttbgwt]

How can I clear out the pre-fetch cache of records so that the next automatic prefetch call starts at page 0? I need to do this after applying a remote filter.

The problem I am seeing is that my grid initially loads with three pages of pre-fetched data, and when I change the filter and call load, the prefetch does not reload/replace the second and third pages of pre-fetched data which need to be refetched based on my filter.

[ttbgwt]

This fixed my problem when filtering:

//this cleared out my prefetch data
this.store.pageMap.clear();

//then my store load worked fine and prefetch started fresh
this.store.load();

[JanVenekamp]

@ttbgwt take a look at: http://www.sencha.com/forum/showthre...l=1#post774527

[westy]

Just changed one of my grids to infinite, and quite like it.

Had to write a little toolbar, since I like the 'Displaying 1 - 10 of 306' from the paging toolbar.
Have also added a refresh button... looks good.

My one concern is I seem to be able to make it hang.
Scrolling about normally seems ok, but if grab the scroller thumb and jump massively ahead, then back to start you often end up with a loading mask that never goes away.
No errors in Firebug.

Will try and figure out what's going on, but suspect it's to do with a load happening whilst another is still in progress.

This has to be rock solid, otherwise it's not an option. I love the concept though

Cheers,
Westy

Edit: My bbar for anyone that's interested; obviously you'll need to sort out the refresh yourself.

Not quite sure why the start value needs tweaking, but it's not too bad...

        bbar: {
            items: [
                {
                    iconCls: 'icon-refresh',
                    handler: function(button) {
                        var grid = button.up('altus-grid');
                        if (grid) {
                            grid.refreshMaintainingSelection();
                        }
                    }
                },
                '->',
                {
                    xtype: 'tbtext',
                    itemId: 'lblDisplayInfo'
                }
            ]
        },

...

        initComponent: function() {
            this.callParent(arguments);


            var me = this,
                view = me.getView(),
                toolbarDispInfo = me.down('#lblDisplayInfo'),
                verticalScroller = me.verticalScroller,
                store = me.getStore(),
                updateToolbarDisplayInfo = function() {
                    var total = store.getTotalCount();
                    toolbarDispInfo.setText(Ext.String.format('Displaying {0} - {1} of {2}',
                                                              verticalScroller.getFirstVisibleRowIndex() + 1,
                                                              total ? Math.min(verticalScroller.getLastVisibleRowIndex(), total) : verticalScroller.getLastVisibleRowIndex(),
                                                              total ? total : 'Unknown'));
                };


            me.mon(
                view,
                'bodyscroll',
                updateToolbarDisplayInfo);
            me.mon(
                view,
                'resize',
                updateToolbarDisplayInfo);
            me.mon(
                store,
                'prefetch',
                updateToolbarDisplayInfo);
        }

[tvanzoelen]

This is really an improvement in performance! I have configured my grid with two stores for the moment. One with a proxy, it pulls down data with sizes of 1000 records and 70 columns.

After load I put the records in the buffered store and I do a reconfigure on the grid. Else it is not working.


I must say, in this way, with less columns I can go up to 10K records.

Someway I must figure out how to combine this all in one store.

[tvanzoelen]

I made a small modification on the PageScroller onRefresh. When scrolling quickly, for example dragging the scroller in one move from below to top it throws an me.viewEl undefined error

Ext.override(Ext.grid.PagingScroller, {

    onViewRefresh: function() {
        var me = this,
            store = me.store,
            newScrollHeight,
            view = me.view,
            viewEl = view.el,
            viewDom = viewEl.dom,
            rows,
            newScrollOffset,
            scrollDelta,
            table,
            tableTop,
            scrollTop;

        if (!store.getCount()) {
            return;
        }

        // No scroll monitoring is needed if
        //    All data is in view OR
        //  Store is filtered locally.
        //    - scrolling a locally filtered page is obv a local operation within the context of a huge set of pages 
        //      so local scrolling is appropriate.
        if (store.getCount() === store.getTotalCount() || (store.isFiltered() && !store.remoteFilter)) {
            me.stretcher.setHeight(0);
            return (me.disabled = true);
        } else {
            me.disabled = false;
        }

        me.stretcher.setHeight(newScrollHeight = me.getScrollHeight());

        scrollTop = viewDom.scrollTop;

        // Flag to the refreshSize interceptor that regular refreshSize postprocessing should be vetoed.
        me.isScrollRefresh = (scrollTop > 0);

        // If we have had to calculate the store position from the pure scroll bar position,
        // then we must calculate the table's vertical position from the scrollProportion


            if ((me.scrollProportion !== undefined) && (me.viewEl !== undefined)) { //<---- check on me.viewEl
                table = me.viewEl.child('table', true);
                me.scrollProportion = scrollTop / (newScrollHeight - table.offsetHeight);
                                
                table = me.viewEl.child('table', true);
                table.style.position = 'absolute';
                table.style.top = (me.scrollProportion ? (newScrollHeight * me.scrollProportion) - (table.offsetHeight * me.scrollProportion) : 0) + 'px';
            }
            else {
                table = viewEl.child('table', true);
                table.style.position = 'absolute';
                table.style.top = (tableTop = (me.tableStart || 0) * me.rowHeight) + 'px';

                // ScrollOffset to a common row was calculated in beforeViewRefresh, so we can synch table position with how it was before
                if (me.scrollOffset) {
                    rows = view.getNodes();
                    newScrollOffset = -viewEl.getOffsetsTo(rows[me.commonRecordIndex])[1];
                    scrollDelta = newScrollOffset - me.scrollOffset;
                    me.position = (scrollTop += scrollDelta);
                }

                // If the table is not fully in view view, scroll to where it is in view.
                // This will happen when the page goes out of view unexpectedly, outside the
                // control of the PagingScroller. For example, a refresh caused by a remote sort or filter reverting
                // back to page 1.
                // Note that with buffered Stores, only remote sorting is allowed, otherwise the locally
                // sorted page will be out of order with the whole dataset.
                else if ((tableTop > scrollTop) || ((tableTop + table.offsetHeight) < scrollTop + viewDom.clientHeight)) {
                    me.position = viewDom.scrollTop = tableTop;
                }
            }
        
        
    }


});

[rkim]

I notice the bouncing up issue.
Specially if you set the height of the column higher than default, it will happen when you get to the bottom of the grid.

Also there seems to be a problem of loading all the chunks(if you have 10 pages, all 10 pages of ajax is called when you scroll to bottom right away) not just first chunk of ajax.

[epinc]

tvanzoelen,

Thank you! Your posted fix worked for me. I was having trouble when adding the variablerowheight parameters (getting the me.viewEl is undefined error) and your fix worked perfectly! I hope they incorporate this into 4.1 final.

[tvanzoelen]

I get an error in getOffsetsTo, cannot getXY()

e = Ext.fly(el, '_internal') returns null

It happens with variableRowHeight on and if there are scrollers visible.

Animal said in post #16 there is a fix for this in the 4.1 final. Can I get that fix somewhere?

var newStore = Ext.create('as.bufferedstore', {
                buffered: true,
                model: model,
                data: data,
                pageSize: data.length,
                sortOnLoad: true,
                remoteSort: false,
                proxy: {
                    type: 'memory'
                }
            });
         
            grid.reconfigure(newStore);

            newStore.load({

                callback: function(records, operation, success) {
                    newStore.sort(cachedStore.getSorters());
                }

            }); //load calls viewrefresh and bang

[westy]

I made a small modification on the PageScroller onRefresh. When scrolling quickly, for example dragging the scroller in one move from below to top it throws an me.viewEl undefined error

Ext.override(Ext.grid.PagingScroller, {

    onViewRefresh: function() {
        var me = this,
            store = me.store,
            newScrollHeight,
            view = me.view,
            viewEl = view.el,
            viewDom = viewEl.dom,
            rows,
            newScrollOffset,
            scrollDelta,
            table,
            tableTop,
            scrollTop;

        if (!store.getCount()) {
            return;
        }

        // No scroll monitoring is needed if
        //    All data is in view OR
        //  Store is filtered locally.
        //    - scrolling a locally filtered page is obv a local operation within the context of a huge set of pages 
        //      so local scrolling is appropriate.
        if (store.getCount() === store.getTotalCount() || (store.isFiltered() && !store.remoteFilter)) {
            me.stretcher.setHeight(0);
            return (me.disabled = true);
        } else {
            me.disabled = false;
        }

        me.stretcher.setHeight(newScrollHeight = me.getScrollHeight());

        scrollTop = viewDom.scrollTop;

        // Flag to the refreshSize interceptor that regular refreshSize postprocessing should be vetoed.
        me.isScrollRefresh = (scrollTop > 0);

        // If we have had to calculate the store position from the pure scroll bar position,
        // then we must calculate the table's vertical position from the scrollProportion


            if ((me.scrollProportion !== undefined) && (me.viewEl !== undefined)) { //<---- check on me.viewEl
                table = me.viewEl.child('table', true);
                me.scrollProportion = scrollTop / (newScrollHeight - table.offsetHeight);
                                
                table = me.viewEl.child('table', true);
                table.style.position = 'absolute';
                table.style.top = (me.scrollProportion ? (newScrollHeight * me.scrollProportion) - (table.offsetHeight * me.scrollProportion) : 0) + 'px';
            }
            else {
                table = viewEl.child('table', true);
                table.style.position = 'absolute';
                table.style.top = (tableTop = (me.tableStart || 0) * me.rowHeight) + 'px';

                // ScrollOffset to a common row was calculated in beforeViewRefresh, so we can synch table position with how it was before
                if (me.scrollOffset) {
                    rows = view.getNodes();
                    newScrollOffset = -viewEl.getOffsetsTo(rows[me.commonRecordIndex])[1];
                    scrollDelta = newScrollOffset - me.scrollOffset;
                    me.position = (scrollTop += scrollDelta);
                }

                // If the table is not fully in view view, scroll to where it is in view.
                // This will happen when the page goes out of view unexpectedly, outside the
                // control of the PagingScroller. For example, a refresh caused by a remote sort or filter reverting
                // back to page 1.
                // Note that with buffered Stores, only remote sorting is allowed, otherwise the locally
                // sorted page will be out of order with the whole dataset.
                else if ((tableTop > scrollTop) || ((tableTop + table.offsetHeight) < scrollTop + viewDom.clientHeight)) {
                    me.position = viewDom.scrollTop = tableTop;
                }
            }
        
        
    }


});

You may want to report that as a bug so that it's gets logged as an issue and fixed.