ExtJs tree panel. How to scroll to a node

Question

I have a Tree Panel which I expand programmatically.

When I expand a node, I would like to "jump to" this node, I mean to scroll to it.

How to scroll a tree panel to a specific node ?

UPDATE: I use Ext 4.1

Answer 1

Try using selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath

Answer 2

In extjs 3.x you can try calling focus() on the TreeNodeUI (myNode.ui.focus())

Answer 3

The tree is asynchronously loading every node, and you need to call to focus only after all the nodes have been loaded. What you are going to need to do is to set autoLoad to false on your root node, then later in the code manually load the root node for the first time using:

rootNode.expand(true, function(){
    myTreePanel.getView().focusRow(nodeyouwanttofocus);
});

doing it this way allows you to use the first parameter of the expand function that makes the expand fully recursive and also assures that the second parameter that is a function only executes after all the nodes are loaded, guarenteeing that the view is the correct height and that the node exists visually.

Another option that allows more flexability is to hook into the expand event:

var myTreeStore = Ext.create("Ext.data.TreeStore", {
    listeners: {
        expand: function(theParentNode){
            theParentNode.eachChild(function(node){
                if(nodeIWantSelected == node)
                     myTreePanel.getView().focusRow(node);
            }
        }
     }
});

and you can use the .select of the selection model to hook in to select the node (and I think it may focus the node too).

I haven't tried 'selectPath' as suggested by Sha before, which seems a lot easier to use, but you can hook in the focusRow function as the callback and I think that would work too.

Answer 4

You can use tree.getView().focusRow(), like it:

tree.expandPath(
    '/root/1/2/3',
    'id',
    '/',
    function() {
        tree.getView().focusRow(tree.getStore().getNodeById('3'));
    }
});

But, if your tree use animate: true and load every node asynchronously and any node in the path not loaded yet this approach doesnt work (tree is not scrolled to the selected node because of multiple layout updates).

As workaround you can:

1. set animate: false for tree;

2. add 'afterlayout' listener, like this:

   tree.on('afterlayout', function() {
       tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
   }
   

   I guess you can add this handler when needed and remove it when everything is done.