Ext JS中如何获取Treepanel的所有已渲染行？

嘿，我明白你遇到的痛点了——想拿到Treepanel里所有已经渲染出来的行，之前试的几个事件要么触发太早，要么覆盖不全。咱们来梳理个能覆盖所有场景的解决方案：

核心思路 #

要搞定初始渲染的行，还要捕获后续展开节点新增的行，得结合TreeView的两个关键事件，再配个通用的获取方法，这样就能把所有情况都兜住。

具体实现步骤 #

1. 先整个通用的获取方法
   写个小函数，随时能拿到当前所有已渲染的行，不管是DOM元素还是Ext组件实例都能取：

   function getRenderedTreeRows(treeView) {
       // 要DOM元素的话用这个
       return treeView.getEl().query('.x-grid-row');
       // 要Ext节点组件实例的话换这个
       // return treeView.getNodes();
   }
   

   按需选就行，前者是原生DOM，后者是Ext封装的组件对象。

2. 处理初始渲染/批量刷新的情况
   监听TreeView的refresh事件，这时候初始加载的行或者批量更新后的行都已经渲染好了，刚好能拿到：

   const treeView = treePanel.getView();
   treeView.on('refresh', function(view) {
       const renderedRows = getRenderedTreeRows(view);
       console.log('初始加载/批量刷新后的已渲染行:', renderedRows);
       // 这里放你要处理的逻辑
   });
   

3. 捕获展开节点新增的行
   单个节点展开时，子节点才会被渲染到DOM，这时候TreeView会触发itemexpand事件，咱们在这就能拿到新增的行，或者直接重新获取所有已渲染行：

   treeView.on('itemexpand', function(view, record) {
       // 只想拿当前展开节点的子行？用这个
       const newChildRows = view.getNodes(record.childNodes);
       console.log('展开节点后新增的行:', newChildRows);
       // 要全量的话就重新调用通用方法
       const allRenderedRows = getRenderedTreeRows(view);
       console.log('现在所有已渲染行:', allRenderedRows);
       // 处理你的业务逻辑
   });
   

为啥之前的尝试不太好使？ #

• treepanel#render：这个事件只是面板自身渲染完了，但TreeView的行是异步加载渲染的，这时候行还没生成，getNodes()肯定是空的。
• treeview#refresh：只有批量更新（比如重新加载数据、过滤）才会触发，单个节点展开不会触发，所以拿不到后续新增的行。
• treeview#cellclick：这是用户点击才触发的被动事件，没法主动追踪行渲染的时机，配合refresh也只能覆盖初始场景，实时性不够。

额外小技巧 #

如果需要实时维护一个已渲染行的集合，不用每次都查DOM，可以在两个事件里更新一个Set：

const renderedRowSet = new Set();

treeView.on('refresh', function(view) {
    const rows = getRenderedTreeRows(view);
    renderedRowSet.clear();
    rows.forEach(row => renderedRowSet.add(row));
});

treeView.on('itemexpand', function(view, record) {
    const childRows = view.getNodes(record.childNodes);
    childRows.forEach(row => renderedRowSet.add(row));
});

之后随时用renderedRowSet就能拿到所有已渲染的行啦。

内容的提问来源于stack exchange，提问作者Lorenz Meyer