Question

我有一个Tree Panel，我以编程方式进行扩展。

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

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

更新：我使用 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上调用focus（）（myNode.ui.focus（））

Answer 3

树以异步方式加载每个节点，只需在加载所有节点后调用焦点。您需要做的是在根节点上将autoLoad设置为false，然后在代码中稍后使用以下方法手动加载根节点：

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

以这种方式执行此操作允许您使用expand函数的第一个参数，该扩展函数使扩展完全递归，并且还确保作为函数的第二个参数仅在加载所有节点后执行，保证视图是正确的高度和节点可视化。

允许更多灵活性的另一个选择是挂钩展开事件：

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

并且您可以使用选择模型的.select来挂钩以选择节点（我认为它也可能会聚焦节点）。

我之前没有按照Sha的建议尝试'selectPath'，这似乎更容易使用，但你可以将focusRow函数挂钩作为回调，我认为这也可以。

Answer 4

您可以使用tree.getView().focusRow()，就像它一样：

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

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

作为解决方法，您可以：

为树设置animate: false;
添加＆＃39; afterlayout＆＃39;听众，像这样：
```
tree.on('afterlayout', function() {
    tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
}
```
我想您可以在需要时添加此处理程序，并在完成所有操作后将其删除。

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

4 个答案: