Question

我正在使用ExtJS 4.1.1中的TreePanel / TreeStore，启用了autoSync，并通过Ajax代理定义了对服务器端点的API调用。

当创建一个具有某些属性集的节点时，我让服务器在对create API端点的autoSync调用期间自动添加2个子节点，服务器响应文本如下所示：

{
  "success" : true,
  "errorMsg" : null,
  "children" : {
    "id" : "toolbox-42",
    "parentId" : null,
    "itemName" : "My Toolbox",
    "nodeType" : "toolbox",
    "children" : [{
        "id" : "tool-91",
        "parentId" : "toolbox-42",
        "itemName" : "Default Tool 1",
        "nodeType" : "tool",
        "leaf" : true,
      }, {
        "id" : "tool-92",
        "parentId" : "toolbox-42",
        "itemName" : "Default Tool 2",
        "nodeType" : "tool",
        "leaf" : true
      }
    ]
  }
}

通过根级别的"children"键设置节点的属性可以正常工作。 "id"属性在插入的节点上设置就好了。

我的问题是服务器添加的子节点没有出现在树中。如何将这些添加到树视图中？

以下是我考虑过的一些解决方案：

在服务器响应中，将根级"children"对象放入数组中，并将新节点附加到数组的末尾（而不是将它们嵌套在父节点下）。 Ext.data.reader.Reader（source here）中的extractData方法表示将提取所有返回的记录。 但是， Ext.data.Operation（here）中的commitRecords方法只更新了请求中包含的clientRecords的数量，这显然不包括任何新的记录。服务器的回应。
在服务器响应之后，使用服务器响应中的"children"节点手动将记录添加到树存储客户端。 但是，似乎没有简单的方法将这些记录标记为“已经同步”。
根本不要在服务器上添加记录;相反，在同步操作发生之前手动将它们添加到客户端上（因此，同步操作将使服务器3插入操作）。 但是，创建请求中的子节点不会设置parentId，因为服务器尚未添加父节点并将id作为响应返回。
附加一个事件处理程序，在服务器添加父节点后将触发一次，然后以编程方式在客户端上添加子节点（然后将自动同步到服务器）。 但是，这需要2次服务器往返。另外，我所知道的唯一候选事件是Ext.data.TreeStore中的'write'，并且没有相应的'failwrite'事件可用于在写操作失败时删除侦听器。我可以添加一个抽象层来提供......但是如果Sencha已经建立了更好的方法，我宁愿不这样做。

还有其他建议吗？我将接受一个有效的建议或描述Sencha如何解决这个问题的任何陈述/链接。

感谢。

更新：我的商店，代理和阅读器配置如下：

  var store = Ext.create('Ext.data.TreeStore', {
    model :    'App.models.Task',
    autoLoad : true,
    autoSync : true,
    proxy : {
      type : 'ajax',
      api : {
        create :  appUrl + 'Data/InsertTreeData',
        read :    appUrl + 'Data/GetTreeData',
        update :  appUrl + 'Data/UpdateTreeData',
        destroy : appUrl + 'Data/DeleteTreeData'
      },
      reader : {
        type : 'json',
        messageProperty : 'errorMsg'
      }
    }
  });

Answer 1

当我在服务器端向树添加一个节点时，我所做的就是获取父对象id（它可能是root，这很好），然后运行如下所示的refreshParent例程：

var node = this.store.getNodeById(id);
if (node){
        this.store.load({node:node});
}

这里的上下文是树面板。此例程重新加载树的特定分支。

当更新符合某些条件时，自动将子节点添加到ExtJS TreePanel的最佳方法是什么？

1 个答案: