在`treepanel` Ext JS

时间:2018-04-09 18:34:52

标签: extjs treeview extjs6-classic extjs6.2

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

我尝试了以下事件:

  • treepanel#renderpanel.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呈现商店的新页面时,我无法找到触发的事件。

1 个答案:

答案 0 :(得分: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);

我不知道这可能产生的性能影响。在我的情况下,没有明显的。

我不知道这是否会对某人有所帮助,但以防我分享...