Skip to content

May 17, 2011

Keep ExtJS TreeGrid scroll position on tree reload

by Joe Kuan

I have a ExtJS 3.2 TreeGrid object that refreshes the tree content in a regular manner. The problem is the vertical scrollbar of the TreePanel jumping back to the top of tree when the TreeGrid’s loader (TreeLoader) is reloaded. However, the TreeGrid is complete different to GridPanel that you cannot use GridView to control the scroll actions, like inforum. So here is a snippet of code to maintain the vertical scrollbar position even after the content is reloaded.

Ext.override(Ext.ux.tree.TreeGrid, {
  scrollTop: 0,
  // Overrides the original function and stores scroll position
  syncScroll : function(){
        var mb = this.innerBody.dom;
        this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
        if (mb.scrollTop > 0)
          this.scrollTop = mb.scrollTop;
  // Restore the scroll position. Call on load
  restoreScroll: function() {
        this.innerBody.dom.scrollTop = this.scrollTop;
        this.innerBody.dom.scrollLeft = 0;

This above code is to override the original method TreeGrid’s syncScroll which is called when the scrollbars are dragged. The additional code is to save the scroll position. Then the restoreScroll method is provided for restoring the previous scroll position. This method is required to bind with the load event of the tree loader, like the following:

      treeGrid.getLoader().on('load', treeGrid.restoreScroll, treeGrid);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: