Question

我正在尝试将子树节点动态添加到非Root节点。

这是我实施它的方式：

首先，我使用TreeStore填充树，然后动态添加子树节点，我在树控制器中的itemexpand事件上处理它。

//pThis is a NodeInterface obj of the selected node
itemexpand: function (pThis, pEOpts) {
      //type is an attribute that I added so that I know what type of node that got selected
      if (pThis.raw.type === 'Staff' && !pThis.hasChildNodes()) {
                    var staffNodeAry = [{text:"Teachers", type:"ChildStaff", leaf: false},
                                                     {text:"Principals", type:"ChildStaff", leaf: false}];          
                     pThis.appendChild(staffNodeAry); 
       }
}

这非常有效，因为我能够在“Staff”类型下看到“Teachers”和“Principals”节点，但到目前为止我发现了2个问题：

1）控制台上出现此错误：

未捕获的TypeError：无法读取未定义的属性“internalId”

我不知道为什么，但是如果有人能够启发这将是伟大的。

2）当我展开“Teachers”和“Principals”时，itemexpand返回的NodeInterface obj有一个未定义的原始对象。

所以我不能这样做：pThis.raw.type

根据我的理解，我不需要创建一个新的TreeStore来添加任何新的子节点，我认为通过创建一个遵循NodeInterface的对象数组应该足够但我可能错了。如果有人能指出我正确的方向，那就太好了。

汉帝

更多信息：

我所做的实际上是遵循ExtJs 4文档，所以我相信这是ExtJs 4框架的一个错误。

我也用Extjs-4.1.0-rc3对它进行了测试，它也产生了同样的错误。

Answer 1

我已解决此问题，使用事件 afteritemexpand 更改事件 itemexpand 。我没有证据证明这一点。调试器告诉我，如果手动添加节点，视图会监听itemexpand事件并做一些出错的事情......

对于问题2：您没有原始对象，因为它是在加载操作之后由商店的读者创建的。因此，如果手动添加节点，则原始对象不存在。

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-property-raw

Answer 2

.appendChild（）函数的文档说：

node : Ext.data.NodeInterface/Ext.data.NodeInterface[]
The node or Array of nodes to append

你试图追加一个包含2个对象的数组，但它们不是“NodeInterface”实例。所以你应该像这样正确地创建它们：

var nodeToAppend1 = pThis.createNode({text:"Teachers", type:"ChildStaff", leaf: false});
pThis.appendChild(nodeToAppend1);

我记得一年前犯过同样的错误，所以我希望这会有所帮助。

Answer 3

我认为这是因为您的Ext.TreePanel异步工作。所以添加流程是：

追加子项，将虚拟子叶添加到树中，角落带有红色标记
致电商店创建api
接收回复，如果成功= true，则更改为虚拟

更改的目标是设置internakId属性，因此只有在发生此更改后才能添加新子项。我认为更好的是编写一些递归函数并将其绑定到存储的附加事件

 tree.getStore().on('update', addChild);

或

tree.getStore().load({
  success: function() { 
     addChild()
  });

ExtJS 4：动态地将子树节点添加到非Root节点？

3 个答案: