在 `treepanel` Ext JS 中获取渲染行

Question

我需要一种方法来获取 treepanel 中所有呈现的行，但我找不到实现它的方法。

我尝试了以下事件：

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

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

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

我也在

中尝试了renderer

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

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

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

Answer 1

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

幸运的是，在 vanilla 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);

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

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

在 `treepanel` Ext JS 中获取渲染行

Get rendered rows in `treepanel` Ext JS

treeview

extjs

extjs6-classic

extjs6.2