在"树形面板"Ext JS中获取呈现的行

Question

我需要一种方法来获取treepanel中的所有渲染行，但我无法找到如何实现它。

我尝试了以下事件：

• treepanel#render：panel.getNodes()为空，因为行在面板之后呈现。
• treeview#refresh：稍后调用它，view.up('panel').getNodes()成功返回行

但这并没有考虑稍后通过扩展节点添加的行。

• treeview#cellclick：这几乎可以与treeview#refresh一起工作，但它不考虑以编程方式.expand()节点
• treepanel#itemexpand：提供对扩展节点和行HTMLElement的访问，但我需要的是渲染的子节点

我也尝试了renderer

xtype: 'treepanel',
columns: {
xtype: 'treecolumn',
renderer: function (...)

这是最佳候选者，因为它只针对每个呈现的行调用一次，但问题是它是在呈现行之前调用的，因此无法从中获取对呈现行的引用。

同样的问题也适用于gridpanel，但事情甚至更复杂。除其他问题外，我无法找到在bufferedRenderer呈现商店新页面时触发的事件。

Answer 1

我无法使用 ExtJs 的不一致事件找到解决方案。

幸运的是，在原版 JS 中，有可能获取插入到 DOM 的节点：MutationObserver。这就是我想出的：

Ext.define('Mb.Application', {
...
launch: function() {
const body = document.getElementsByTagName('body')[0],
config = { childList: true, subtree: true },
callback = function(mutationsList) {
mutationsList.forEach(mutation => {
if (mutation.type !== 'childList') return
if (!mutation.addedNodes.length) return
mutation.addedNodes.forEach(node => {
// test if it is a row and do what I need
})
})
};
var observer = new MutationObserver(callback.bind(this));
observer.observe(body, config);

我不知道这可能产生的性能影响。就我而言，没有明显的。

我不知道这是否会帮助某人，但以防万一我分享它......