javascript 如何将子项添加到 TreePanel 中的节点?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10275448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:16:46  来源:igfitidea点击:

How to add a child to a node in a TreePanel?

javascriptextjsextjs4treepanel

提问by Shashwat

In a tree structure like this

在这样的树结构中

var rootNode = { 
              id: 'root',
              text : 'Root Node',
    expanded : true,
    children : [
    {
        id :  'c1',
        text : 'Child 1',
        leaf : true
    },
    {
        id :  'c2',
        text : 'Child 2',
        leaf : true
    },
    {
        id :  'c3',
        text : 'Child 3',
        children : [
        {
            id :  'gc1',
            text : 'Grand Child',
            children : [
            {
                id :  'gc11',
                text : 'Grand Child 1',
                leaf : true
            },
            {
                id :  'gc12',
                text : 'Grand Child 2',
                leaf : true
            }
            ]
        }
        ]
    }
    ]
};

var tree = new Ext.tree.TreePanel({
    id: 'treePanel',
    autoscroll: true,
    root: rootNode
});

How do I add a child node of any node (say 'grandchild')?

如何添加任何节点的子节点(比如“孙子”)?

I can access the child by traversing the root of the treepanel, but I console.logged it in Firebug, it does not have any functions. Sorry for the unformatted code, I was not able to format it.

我可以通过遍历树面板的根来访问子节点,但是我在 Firebug 中控制台.logged 它,它没有任何功能。很抱歉未格式化的代码,我无法对其进行格式化。

Tree Panel

树面板

回答by Vahid

Do something like this:

做这样的事情:

var treeNode = tree.getRootNode();
treeNode.expandChildren(true); // Optional: To see what happens
treeNode.appendChild({
        id: 'c4',
        text: 'Child 4',
        leaf: true
});
treeNode.getChildAt(2).getChildAt(0).appendChild({
        id: 'gc13',
        text: 'Grand Child 3',
        leaf: true
});

If this is what you need, check out NodeInterface Class. It has many useful methods: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.NodeInterface

如果这是您需要的,请查看 NodeInterface 类。它有很多有用的方法:http: //docs.sencha.com/ext-js/4-0/#!/api/Ext.data.NodeInterface

回答by Lawrence

It may be an older thread, but, I had an issue where I added a child to the selected node. I wanted to show the new child by expanding the selected node and such failed.

它可能是一个较旧的线程,但是,我遇到了一个问题,我向所选节点添加了一个子节点。我想通过扩展选定的节点来显示新的孩子,但失败了。

The reason: the selected node to which I appended a child had its property 'leaf' set to true. That was correct. But due to the append, this was no longer true. And because of it, apparently, Ext refuses to expand the node...

原因:我向其附加子节点的选定节点的属性“叶”设置为 true。那是正确的。但由于追加,这不再是真的。正因为如此,显然,Ext 拒绝扩展节点......

So beware: when you add a node to another node, make sure you set the 'leaf' property of the parentNode to 'false':

所以要注意:当你将一个节点添加到另一个节点时,确保你将 parentNode 的 'leaf' 属性设置为 'false':

var newNode = Ext.create('some.model.TreeModel', savedNode);
newNode.set('parentId', record.parentLocationId);
selectedNode.set('leaf', false);
selectedNode.appendChild(newNode);
selectedNode.expand();
treeView.getSelectionModel().select(newNode);