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

Question

我正在尝试在非根节点被选中时动态地将子树节点添加到它。

我是这样实现的：

首先，我用 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); 
       }
}

这很有效，因为我可以在“员工”类型下看到“教师”和“校长”节点，但到目前为止我发现了 2 个问题：

1) 控制台出现这个错误：

未捕获的类型错误：无法读取未定义的属性“internalId”

我不知道为什么，但如果有人能启发，那就太好了。

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

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

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

汉地

更多信息：

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

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

Answer 1

我已经解决了将事件 itemexpand 更改为事件 afteritemexpand 的问题。我没有任何文件可以证明这一点。调试器对我说，视图会监听 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 异步工作。所以添加过程是：

1. Append Child，将虚拟子叶子添加到您的树中，角落带有红色标记
2. 调用store的create api
3. 接收响应，如果success=true，用virtual改变

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

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

或

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