Results 1 to 3 of 3

Thread: gridview jumps to top while loading

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2014
    Location
    Gouda, the Netherlands
    Posts
    2

    Default gridview jumps to top while loading

    Hi,
    When a gridview is loading data from a slow source, it resets the scrollbar everytime new data is added. This is inconvenient as the user may already be scrolling in the data.<br>A solution is to check if the scroll position is below the amount of data in the view. And then only reset the scrollbar if there's less data than where the scrollposition points at.

    Code:
    (function() {        var orig_onLoad = Ext.grid.GridView.prototype.onLoad;
    
    
            Ext.override(Ext.grid.GridView, {
                    /*
                     * Override the Ext.grid.GridView onLoad method.
                     * The original one in ExtJs 3 "resets the scrollbar" every time new items
                     * are added. This is especially uncomfortable when doing a large, slow,
                     * search.
                     * The original onLoad is now replaced by something which checks if the
                     * scroll position is below the actual bottom grid row. If that's the case,
                     * then and only then we reset the scroll position to the top of the grid.
                     * It is thought that the original scroll-to-the-top behaviour was only
                     * intended to prevent the situation where the user was left with a white
                     * screen when a grid was reloaded with less items than before (- when the
                     * scroll was done).
                     */
                    onLoad : function()
                    {
                            var rowCount = this.getRows().length;
    
    
                            // Count the content hight in pixels.
                            var totalPixels = 0;
                            for(var rowNr=0; rowNr<rowCount; rowNr++) {
                                    totalPixels += this.getRow(rowNr).clientHeight;
                            }
    
    
                            /*
                             * If the current scroll position is below the bottom of
                             * the grid-items, then scroll all the way up
                             * In theory we could also just move to [bottom - window size] but that
                             * might be confusing.
                             * We let the original onLoad take care of the scrolling: in case it
                             * has other things to do so besides the this.scrollToTop() call.
                             */
                            if (this.el.getScroll().top >= totalPixels) {
                                    orig_onLoad.apply(this, arguments);
                            }
                    }
            });
    })();

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    What version of Ext are you using?
    Aaron Conran
    @aconran

  3. #3
    Sencha User
    Join Date
    Jun 2014
    Location
    Gouda, the Netherlands
    Posts
    2

    Default

    Version 3.4.Version 4 has a method via which one can completely disable the jump-back functionality but I think that is a bit too much as you then can have the situation where the scroll-position is below the actual data. That's why I followed the path of calculating the real end-of-data y-offset and comparing that with the scroll-offset.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •