ExtJs: Tree: how to scroll directly to a specific element?

Question

I\'m looking for a way to scroll to a specific element in a Tree. Any idea how to do this ?

Answer 1

I just had to call n.select(); but I had to do it in the right place :)

I made a TreeLoader, and linked it to my tree. In its event load (which means 'when all is downloaded', I would have called it afterload...), I read all the nodes and depending on their id I act consequently:

var LasTreeLoader = new Ext.tree.TreeLoader({
    dataUrl: 'json/las.php',
    listeners: {
        load: function(loader,n,response) {
        console.log('datas downloaded');
        n.eachChild(
            function(n) {
                if ((n.id=='las/2007') ||
                    (n.id=='las/2007/08') ||
                    (n.id=='las/2007/08/29')) {
                    n.expand(false,false);
                }
                if (n.id=='las/2007/08/29/21_14_04') {
                    n.select();
                }
            });
        }
    }
});

Answer 2

Try this in your node click event handler:

node.getUI().getIconEl().scrollIntoView(node.getOwnerTree(), false);

Answer 3

The DOM scrollIntoView doesn't really work as expected as it always either top or bottom aligns the element. ExtJS however seems to have just what is needed:

Ext.get(el|elId).scrollIntoView(containerId|containerEl);

For example, to ensure the currently selected item in an Ext.view.View (dataview) instance is visible, I did:

Ext.define('MyView', {
    extend: 'Ext.view.View',
    ...

    listeners: {
        'selectionchange': function(_, selections) {
            if (selections.length === 1) {
                var node = this.getNode(selections[0]);
                Ext.fly(node).scrollIntoView(this.el);
            }
        }
    },
    ...
}

Answer 4

It isn't directly related to extJs, but you could get the DOM element you want in your tree and use scrollTo to get to it.

Answer 5

var path = tree.getSelectionModel().getSelectedNode().getPath('id');  
    //reload data,  
    tree.getLoader().load(tree.getRootNode(),function(treeNode){  
    //expand path and select node
    tree.expandPath(path,'id',function(bSucess,oLastNode){  
        tree.getSelectionModel().select(oLastNode);  
    });  
},this);