1

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

当使用某些属性集创建节点时，我让服务器在 autoSync 调用创建 API 端点期间自动添加 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 (这里) 中的 commitRecords 方法只更新请求中包含的 clientRecords 的数量，这显然不包括服务器响应中的任何新记录。
  • 在服务器响应后，使用服务器响应中的节点手动将记录添加到树存储客户端"children"。但是，似乎没有简单的方法可以将这些记录标记为“已同步”。
  • 根本不要在服务器上添加记录；相反，在同步操作发生之前手动将它们添加到客户端（因此，同步操作将为服务器提供 3 个插入操作）。但是，创建请求中的子节点不会设置 parentId，因为服务器尚未添加父节点并返回 id 作为响应。
  • 附加一个事件处理程序，该处理程序将在服务器添加父节点后触发一次，然后在客户端上以编程方式添加子节点（然后将自动同步到服务器）。但是，这需要 2 次服务器往返。此外，我知道的唯一候选事件是'write'在 Ext.data.TreeStore 中，并且没有相应的'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'
      }
    }
  });
4

1 回答 1

2

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

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

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

于 2013-02-22T00:44:21.523 回答