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

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

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

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

更新：

---

我在extjs 3.x中使用了Ext 4.1您可以尝试在TreeNodeUI（myNode.ui.focus（））上调用focus（）

在extjs 3.x中您可以尝试在TreeNodeUI（myNode.ui.focus（））上调用focus（）

尝试使用

selectPath（）

尝试使用

selectPath（）

树异步加载每个节点，只有在加载所有节点后，才需要调用focus。您需要做的是在根节点上将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函数作为回调函数挂接，我认为这也会起作用。

树是异步加载每个节点的，只有在加载完所有节点后才需要调用focus。您需要做的是在根节点上将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函数作为回调函数挂接，我认为这也会起作用。

您可以使用，比如：

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

但是，如果您的树使用

animate:true

并异步加载每个节点，并且路径中的任何节点尚未加载，则此方法不起作用（由于多次布局更新，树不会滚动到选定节点）

作为解决方法，您可以：

为树设置

动画：false

添加“afterlayout”侦听器，如下所示：

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

我想您可以在需要时添加此处理程序，并在完成所有操作后将其删除

您可以像这样使用：

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

但是，如果您的树使用

animate:true

并异步加载每个节点，并且路径中的任何节点尚未加载，则此方法不起作用（由于多次布局更新，树不会滚动到选定节点）

作为解决方法，您可以：

为树设置

动画：false

添加“afterlayout”侦听器，如下所示：

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

我想您可以在需要时添加此处理程序，并在完成所有操作后将其删除

---

您使用的是什么版本的ExtJs？您使用的是什么版本的ExtJs？如果tree异步加载每个节点，但尚未完全加载，则对我来说不起作用，即逐个加载每个节点并选择最后一个节点，但树不会滚动到所选节点。如果树异步加载每个节点，但尚未完全加载，即每个节点逐个加载，最后一个节点被选中，但树不会滚动到所选节点，则此操作对我有效。