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

Posted 2023-02-26

【中文标题】ExtJs 树面板。如何滚动到节点

【英文标题】：ExtJs tree panel. How to scroll to a node

【发布时间】：2012-05-31 16:44:10

【问题描述】：

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

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

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

更新： 我使用 Ext 4.1

【问题讨论】：

你使用的是什么版本的 ExtJs？

【参考方案1】：

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

【讨论】：

如果树异步加载每个节点但尚未完全加载，这对我有用，即每个节点都被一个一个加载并且最后一个节点被选中，但树没有滚动到选定的节点。

【参考方案2】：

在 extjs 3.x 中，您可以尝试在 TreeNodeUI 上调用 focus() (myNode.ui.focus())

【参考方案3】：

树是异步加载每个节点的，只有在加载完所有节点后才需要调用焦点。你需要做的是在你的根节点上将 autoLoad 设置为 false，然后在代码中第一次使用手动加载根节点：

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

这样做允许您使用扩展函数的第一个参数，使扩展完全递归，并确保作为函数的第二个参数仅在所有节点加载后执行，保证视图是正确的高度并且节点在视觉上存在。

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

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函数作为回调挂钩，我认为这也可以。

【参考方案4】：

你可以使用tree.getView().focusRow()，点赞：

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

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

作为解决方法，您可以：

为树设置animate: false；

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

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

我猜你可以在需要时添加这个处理程序，并在一切完成后删除它。