游乐游手机版
首页/前端开发/文章详情

ExtJS刷新后如何默认选中上次选中的节点

时间:2026-06-11 07:07
通过记录节点路径,在树刷新后调用expandPath展开路径并选中目标节点。3 x版本需显式调用select方法,4 x版本建议在回调函数中添加select方法以确保节点被选中。后台返回的JSON数据必须包含id属性,否则路径定位将会失效。

在对树节点执行操作后,我们通常需要调用 reload 方法刷新整棵树。然而,许多实际业务场景要求:刷新完成后,树能够自动定位并选中上一次操作的那个节点。也就是说,必须先记住上次选中的是哪个节点,等 reload 执行完毕后再把它找出来,逐层展开,最终精确地定位到该节点上。

经过一番探索,终于找到了一个可靠的办法——使用节点的 path 来记录它的位置信息。获取到 path 之后,从根节点开始逐层展开,直到最后一个节点,再将它选中。说起来并不复杂,但实现细节值得仔细推敲。

ExtJS 3.x 版本

在 3.x 中实现方式比较直接:先获取当前选中的节点,如果没有选中,就单纯重载树;如果已选中,就记录它的 path,然后通过树的 loader 重新加载根节点,加载完成后调用 expandPath 展开路径,最后选中那个节点。代码如下:

复制代码 代码如下:

//获取选中的节点
var node = tree.getSelectionModel().getSelectedNode();
if(node == null) { //没有选中 重载树
    tree.getRootNode().reload();
} else { //重载树 并默认选中上次选择的节点
    var path = node.getPath('id');
    tree.getLoader().load(tree.getRootNode(),
        function(treeNode) {
            tree.expandPath(path, 'id', function(bSucess, oLastNode) {
                tree.getSelectionModel().select(oLastNode);
            });
        }, this);
}

ExtJS 4.2 版本

到了 4.x 版本,API 有所变化,但核心思路保持一致。先获取 path,然后通过 store 的 load 方法重新加载根节点,在回调里直接调用 expandPath 展开路径。4.x 的 expandPath 是否自带节点命中后的选中逻辑?实际上并没有,这里仅仅执行展开操作,真正的选中仍需额外处理。需要注意的是,在 4.2 示例中只调用了 expandPath,没有显式选中节点——这是否意味着展开后树会自动高亮路径上的节点?官方文档并未给出保证。为了稳妥,建议在 expandPath 的回调中补充 select 操作。不过下面贴出的是社区中常见的写法:

复制代码 代码如下:

idPath = selNode.getPath("id");
tree.getStore().load({
    node: tree.getRootNode(),
    callback: function () {
        tree.expandPath(idPath, 'id');
    }
});

这里有一个关键陷阱:后台返回的树节点 JSON 数据中,必须包含 id 属性。之前曾尝试将 getPath 的参数换成其他自定义属性,结果始终无法奏效。最后老老实实让 JSON 里带上 id,问题才顺利解决。这一点务必引起重视,否则路径定位会完全失效。

ExtJS 刷新后如何默认选中刷新前最后一次选中的节点

总的来说,这个方案的核心逻辑就是“记录 path → 重载树 → 展开路径 → 选中节点”,无论是 3.x 还是 4.x,这一骨架始终不变。区别仅在于 API 的调用方式,以及 4.x 中 expandPath 是否自动触发选中行为——在实际测试中,为了保险起见,最好还是在回调里手动补上 select。此外,确保每个节点都有唯一的 id,这样才能让 path 真正发挥定位作用。

来源:https://www.jb51.net/article/48709.htm
上一篇ExtJS表单常见验证方法汇总 下一篇如何在ExtJS Grid中具体添加图片状态或按钮的方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Layui弹出层监听子页面键盘快捷键实现方法
前端开发 · 2026-07-06

Layui弹出层监听子页面键盘快捷键实现方法

子页面键盘事件监听需在DOM加载完成后绑定,父页无法直接监听子页按键,必须由子页自身监听后通过parent或postMessage通知父页。典型写法为子页调用父页已定义的关闭函数。需注意焦点状态、输入法及layui版本兼容性等陷阱。

Layui表单提交时携带当前页面Meta信息的实现方法
前端开发 · 2026-07-06

Layui表单提交时携带当前页面Meta信息的实现方法

Layui表单提交不会自动携带页面Meta信息,需在form on( submit )回调中手动读取meta内容并拼接到表单数据,注意后端字段映射及特殊字符编码,多meta时按需选取。

HTML5拖拽事件流状态转移监控调试
前端开发 · 2026-07-06

HTML5拖拽事件流状态转移监控调试

HTML5拖拽事件流易因漏监听或未调用preventDefault而中断。需掌握dragstart设置数据、dragover接受放置、drop触发条件等关键点。通过统一日志捕获事件上下文、识别常见状态丢失场景并配合可视化面板,可清晰定位拖拽过程断点。

uni-app实现小红书商品详情图卡片切换
前端开发 · 2026-07-06

uni-app实现小红书商品详情图卡片切换

通过手写touch事件与transform控制五张卡片,动态计算translateX、scale、opacity及z-index模拟层叠滑动效果。滑动距离超过80rpx触发切换,否则复位。图片仅渲染当前及前后两张,有效优化加载性能与渲染效率。

图像旋转倾斜与扭曲的Canvas像素矩阵变换
前端开发 · 2026-07-06

图像旋转倾斜与扭曲的Canvas像素矩阵变换

Canvas图像变形本质是操作坐标系,图像被动跟随。旋转需先平移原点至目标中心再旋转后复位;倾斜通过仿射变换矩阵实现;扭曲无原生API,可用分块模拟或转用WebGL。每次变换前保存状态,完成后恢复,避免坐标系偏移。