Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

Thread: Maintain Grid Scrollbar Position in EXTJS 4

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    9

    Default Maintain Grid Scrollbar Position in EXTJS 4

    Question 5.9 on the EXT FAQ Grid page: "Maintain GridPanel scroll position across Store reloads" gives the following code snippet to prevent the view from shifting to the top every time the grid is refreshed in the background:

    PHP Code:
    onLoadExt.emptyFn,
    listeners: {
        
    beforerefresh: function(v) {
           
    v.scrollTop v.scroller.dom.scrollTop;
           
    v.scrollHeight v.scroller.dom.scrollHeight;
        },
        
    refresh: function(v) {
           
    v.scroller.dom.scrollTop v.scrollTop 
            (
    v.scrollTop == v.scroller.dom.scrollHeight v.scrollHeight);
        }

    Probably because of all the changes in Grids, this code no longer works in EXTJS 4. I've been all over the forums, API docs, and even the source code searching for a new method. The best result I've achieved so far is to keep the scrollbar static, but the grid rows still reset so the view is showing the first rows while the scrollbar remains at the bottom.

    Does anyone know how to update this snippet for EXTJS4?

    And while we're on this subject EXTJS4 introduced the new "loading" graphic that pops up while the grid is refreshing which creates a noticeable flicker in our application that wasn't there in EXTJS3. Is there a way to disable that and get the old behavior back?

    Thanks.

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    13

    Default

    I'm also looking to maintain the scroll state of the grid view over a store load. I see these new methods for 4.0.1: view.saveScrollState() and view.restoreScrollState(), but no examples on how to use them. Using them in place of the above code doesn't seem to work.

    Has anyone figured this out?

    Thanks,
    Jed

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    9

    Default

    I haven't solved this issue yet, but I was looking at it again today and I did discover that the beforerefresh event doesn't fire on a store load. I think that is the key to solving this problem.

    I've tried calling my "save scrollbar" code from the beforeload event of my store. The trick now is just to figure out which combination of dom elements to save and restore.

    I will let you know if I figure it out.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    13

    Default

    I found this accidentally, since it's not listed in the API for 4.0, but it's what we're looking for:
    Code:
    invalidateScrollerOnRefresh: false,
    Just toss that onto your grid configuration and it should be good to go. Works for my purposes.

    Makes me wonder what other gems are hidden in the code and aren't displayed in the API?

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    9

    Default

    I found that invalidateScrollerOnRefresh property weeks ago, but it doesn't work for me.

    Sure, the scroll bar stays in position, but the data in the grid resets meaning that I see the first row of data at the top of the grid while the scroll bar shows it should be at the bottom. And then when I move the scroll bar up and down the data gets very messed up. Usually a few rows are missing entirely.

    You don't experience that behavior?

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    13

    Default

    I do not experience that behavior; it works exactly how I need it to, actually. The scroller doesn't move, the data doesn't move either. I do have certain fields updating based on user interaction, which causes the Store to reload.

    It must be something else you have set. I'd take a look at the configs on your grid/Store and the listeners you have set up and see if something there is causing your grid to jump around.

  7. #7
    Sencha User
    Join Date
    May 2011
    Posts
    9

    Default

    I upgraded to 4.0.2 and now both invalidateScrollerOnRefresh: false and loadMask: false are working.

    The only problem I see now is that if I have my grid scrolled all the way to the bottom and I insert a new element the last row gets pushed off and you can't scroll down because the scrollbar thinks its at the bottom. This fixes itself as soon as the scrollbar is moved. There must be a method to re-calibrate the scrollbar so as soon as I find that I think I'll be set.

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    13

    Default

    I'm in the process of upgrading myself.

    I used this:
    Code:
    Ext.getCmp('servicesGrid').invalidateScroller();
    In some of my function calls, which forces the scroller to re-calibrate. If you use this and then set the scroll state when you're adding rows at the bottom, it may solve your issue.

  9. #9
    Sencha User
    Join Date
    May 2011
    Posts
    9

    Default

    Thanks. Calling invalidateScroller() on the grid directly does work.

    That said, I think I have found a much cleaner way to do what we want. I have finally found the code that resets the scrollbar on store load and it's not related to invalidateScroller() at all, except they are checking that config property. Here is the function from Line 138 of /src/View/Table.js

    Code:
        
    onStoreLoad: function(){
        var me = this;
        if (me.invalidateScrollerOnRefresh) {
            if (Ext.isGecko) {
                if (!me.scrollToTopTask) {
                    me.scrollToTopTask = Ext.create('Ext.util.DelayedTask', me.scrollToTop, me);
                }
                me.scrollToTopTask.delay(1);
            } else {
                me    .scrollToTop();
            }
        }
    }
    To disable this all you have to do is add one line in your viewConfig like so:

    Code:
    viewConfig: {
        loadMask: false,
        onStoreLoad: Ext.emptyFn,
        ...
    }
    That seems to do what I need and I don't have to manually call invalidateScroller().

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Scrolling is changing in 4.1.0, so this invalidateScrollerOnRefresh is going away. 4.1.0 will not be using faked scrollbars as begun with 4.0.0

    The issue is that there is no beforerefresh event fired by DataView (which GridPanel could pick up on and relay to allow you to implement a scroll position saving scheme)

    On the other issue about the LoadMask, if you do not want a loadMask appearing when a DataView's store is loading, configure the DataView with

    Code:
    loadMask: false
    For a GridPanel this will mean specifying that in the viewConfig config option.

    I'll add a story to implement beforerefresh on DataView and GridPanel.

Page 1 of 4 123 ... LastLast

Posting Permissions

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