extjs treepanel 加载子项而不展开答案

【问题标题】：extjs treepanel load children without expandextjs treepanel 加载子项而不展开
【发布时间】：2016-01-18 11:11:48
【问题描述】：

我使用 Extjs 3.4。我正在使用复选框解决方案在 TreePanel 上工作。

我需要的是：当我检查父节点时，所有子节点也被检查。很简单，但是要靠extjs展开所有childNodes。

如果我这样做了

tree.expandAll();
tree.collapseAll();

我的检查策略会起作用，但我不想要展开效果。

我的 extjs 代码(checkchange event) 如下所示：

var checkchange = function(node, flag) {

        if (node.hasChildNodes()) {
            node.cascade(function(node) {
                node.attributes.checked = flag;
                node.ui.checkbox.checked = flag;
                return true;
            });
        }

        var pNode = node.parentNode;
        for (; pNode != null; pNode = pNode.parentNode) {
            if (flag || tree.getChecked("checked", pNode).length - 1 == 0) {
                pNode.attributes.checked = flag;
                pNode.ui.checkbox.checked = flag;
            }
        }
    };

var tree = new Ext.tree.TreePanel({

    listeners: {
        'checkchange': checkchange
    },
})

我该怎么办？感谢每一位提供建议。

[编辑]

我创建了A Demo In jsfiddle，可以轻松测试。

（由于jsfiddle使用的Extjs 3.4.0 cdn不起作用，我从https://cdnjs.com/libraries/extjs/3.4.1-1附加另一个cdn extjs资源）

【问题讨论】：

如果你分享一个小提琴会更容易帮助。
子部分的expanded: true/false 配置怎么样？

标签： extjs treepanel

【解决方案1】：

我不确定您是否真的希望在检查根节点时逐节点加载整棵树。我建议通过附加到load 事件，在为已检查的父节点加载子节点时懒惰地检查子节点。像这样的：

load:function(me, node) {
    if(node && node.attributes.checked) node.cascade(
        ... [function to check all children]
    )
}

根据您进一步处理的意图和树的大小，这可能比扩展整个树以呈现并选中所有复选框更好。

如果你想直接加载树，我建议在 TreeLoader 上使用preloadChildren:true。这比手动实现级联加载要容易。

【讨论】：

谢谢。实际上，一开始并没有检查所有节点。如果我检查根节点，只检查根节点，所有子节点都没有。这不是我的目的。如果我先展开然后检查根节点，子节点也会被检查。
@AylwynLake 我为我的答案添加了另一种可能性。
我已经测试了preloadChildren:true，它不起作用。你会检查我帖子编辑块中的演示链接吗？

【解决方案2】：

我并没有真正解决这个问题。但我有一个折衷的解决方案。

仅在需要时展开

checkchange : function(node, flag){

    node.cascade(function(node) {
        // when you check, first expand, then child nodes can be checked too
        if(node.expanded == false)
            node.expand(true);
        node.attributes.checked = flag;
        node.ui.checkbox.checked = flag;
        return true;
    });
    ......
}

这将满足所有子节点都应该展开的前提条件。但首次加载时也无需展开。

如果第一次加载时检查了父节点，则所有子节点都需要展开

this.treeLoader = new Ext.tree.TreeLoader({
    url : 'xxx',
    baseParams  : {
        someparam: ""
    },
    listeners : {
        'load' : function(tree,node,response) {
            var res = Ext.util.JSON.decode(response.responseText);
            if(res.success != undefined && !res.success) {
                Ext.Msg.alert('Hint', res.message);
                return;
            }
            node.cascade(function(node) {
                if(node.attributes.checked == true) {
                    node.expand(true);
                }
            });
        },

    }
});

这两种方法确实解决了我的问题，虽然不是很完美。

希望这可以帮助其他人。

【讨论】：