extjs - ExtJs 树面板。如何滚动到节点

Question

我有一个以编程方式扩展的树面板。

当我展开一个节点时，我想“跳转到”这个节点，我的意思是滚动到它。

如何将树面板滚动到特定节点？

更新：我使用Ext 4.1

Answer 1

尝试使用selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath

Answer 2

在 extjs 3.x 中，您可以尝试在 TreeNodeUI (myNode.ui.focus()) 上调用 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

你可以使用tree.getView().focusRow()，喜欢它：

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

但是，如果您的树animate: true异步使用和加载每个节点并且路径中的任何节点尚未加载，则此方法不起作用（由于多个布局更新，树不会滚动到所选节点）。

作为解决方法，您可以：

1. 为树设置animate: false；

2. 添加“后布局”监听器，如下所示：

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

   我想您可以在需要时添加此处理程序，并在一切完成后将其删除。