ExtJS 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

如此细微的差别，却似乎产生了很大的差别！？