Question

我看到很多线程都在讨论使用getNodeById或getRootNode方法和appendChild方法向TreePanel添加动态节点。

出于某种原因，我无法做到。我不知道我做错了什么，或者这是否与Ext JS 3.4有关。

有人可以告诉我这是不是正确吗？

{
    xtype: 'treepanel',
    id: 'testTreePanel',
    autoScroll: true,
    width: 250,
    collapsible: true,
    title: 'Navigation',
    containerScroll: true,
    enableDD: true,
    useArrows: true,
    collapsible: true,
    region: 'west',
    root: {
      allowDrag: false,
      allowDrop: false,
      iconCls: 'cover',
      id: 'testRootNode',
      text: 'Root Node'
    },
    loader: {

    }
  }

以下是我正在动态添加节点的内容 -

var testNode = new Ext.tree.TreeNode({
     id: 'node_1',
     leaf: true,
     text: 'Test Node Text 1',
     allowDrag: false,
     allowDrop: false
});

Ext.getCmp('testTreePanel').getRootNode().appendChild(testNode);

我看到节点已添加到根目录下，如果我这样做 -

Ext.getCmp('testTreePanel').getRootNode().childNodes

但我也注意到root有allowChildren: false，loaded: false，loading: true和childrenRendered: false

我见过的所有帖子都说appendChild应该可以解决这个问题。我不确定我是否在这里遗漏了一些东西。

Answer 1

以下代码适用于我：

var tree = new Ext.tree.TreePanel({
            id: 'treePanel',
            renderTo: Ext.getBody(),
            autoscroll: true,
            root:   {
                id: 'root',
                text : 'Root Node',
                expanded : true,
                leaf:false,
                children: []
            }
        });

        var treeNode = tree.getRootNode();

        treeNode.appendChild({
                id: 'c1',
                text: 'Child 1',
                leaf: true
        });
        treeNode.appendChild({
                id: 'c2',
                text: 'Child 2',
                leaf: true
        });
        treeNode.expandChildNodes(true);

你的代码的唯一区别是你将Ext.tree.TreeNode实例传递给你的appendChild方法，而我只传递一个节点的对象配置，这是根据文档的正确方法 - ＆gt; http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreeNode-method-appendChild

这是一个微妙的差异，但似乎有很大不同！？

Ext JS 3.4 - 在TreePanel中动态添加节点

1 个答案: