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

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方法,而我只传递一个节点的对象配置,这是根据文档的正确方法 - > http:// docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreeNode-method-appendChild

所以微妙的差异,但似乎有很大的不同!？