使用 GWT RPC 调用将数据加载到 Sencha GXT (3.0) ListStore 中的简单示例

Question

有没有人知道一个示例，该示例演示了使用Sencha GXT 3.0通过GWT RPC调用将数据加载到ListStore中？ 我知道有许多使用2.x版本中使用的ModelData和BeanModel接口的例子，但3.0消除了使用这些接口的需要，并且应该允许使用实现ValueProperty接口的类加载POJO对象。

我已经在 3.0 资源管理器中看到了 RequestFactoryBinding 示例和 RequestFactory Grid 示例，但这些示例似乎演示了自定义数据代理和接收器的使用。 我通过查看这些示例中的代码来假设可能需要这些技术/类，但这在任何地方都不明显。 可能会有更多的文档即将推出，但到目前为止，除了javadocs和资源管理器之外，我还没有找到太多内容，资源管理器缺少示例方法中使用的一些源代码类。

指向以下两个示例的链接。

RequestFactoryBinding 示例：http://www.sencha.com/examples/#ExamplePlace:requestfactorybinding

请求工厂网格示例：http://www.sencha.com/examples/#ExamplePlace:requestfactorygrid

Answer 1

DataProxy 和 Loader 主要用于促进 a( 依赖服务器进行过滤/分页/排序，或 b( 在应用程序的各个部分之间重用以访问相同的数据片段。在客户端仅加载一次数据或完成手动存储管理的情况下，不需要它们(如在 2.x 中(。

各种存储加载类(ListStoreBinding、LoadResultListStoreBinding(在内部演示了如何向列表存储馈送项目。第一种方法允许您从 RPC 回调或 RequestFactory 接收器中的 onSuccess 方法替换存储中的现有项：

List<MyData> newItems = ...;//response from server
ListStore<MyData> store = ...;//current store to replace/update
store.replaceAll(newItems);

如果只加载一次，或者只追加，不替换，则应使用其他方法：

store.addAll(newItems);

可以使用store.add逐个添加项目，但这会导致每个项目发生事件，应避免。

编辑：此外，这可能不是完全清楚来自2.x，但是数据本身不需要超类/接口。 ValueProvider仅用作如何操作模型的外部抽象 - 如何从任何类型的模型中读取或设置值。PropertyAccess 接口允许仅由属性名称生成ValueProvider(和其他(实例，该属性名称将使用 Bean 访问器获取/设置值。加载数据不需要 ValueProvider 类型/实例，只需数据小部件本身提取它们显示的数据，并在用户编辑值后进行修改。

---

了解这些部分后，加载器/代理机制将以相同的基本方式加载数据。加载器负责被告知加载时使用哪些设置(分页、过滤和/或排序(，然后触发加载 - 不同的子类具有不同的职责，接受不同的加载配置类型，并返回不同的结果。然后，DataProxy 是一种机制，它实际上与保存数据的任何内容进行通信，如果在服务器上是异步的，并在结果可用时通过回调通知加载器。

问题中列出的示例都使用 RequestFactory，但也有几个示例使用 RPC，还有一些示例仅从 JSON 或 XML 加载。http://www.sencha.com/examples/#ExamplePlace:paginggrid 主要数据加载部分如下：

// The rpc async instance
final ExampleServiceAsync service = GWT.create(ExampleService.class);
// As in Ext GWT 2, there is a convenience proxy for RPC to just pass the callback 
// directly to the RPC call. If you need a custom callback, just be sure to invoke 
// `callback.onSuccess` with the final result.
RpcProxy<PagingLoadConfig, PagingLoadResult<Post>> proxy = new RpcProxy<PagingLoadConfig, PagingLoadResult<Post>>() {
  @Override
  public void load(PagingLoadConfig loadConfig, AsyncCallback<PagingLoadResult<Post>> callback) {
    service.getPosts(loadConfig, callback);
  }
};
// ...
// The loader itself has a reference to the proxy so that loader.load() results
// in a round trip to the server, as outlined above.
final PagingLoader<PagingLoadConfig, PagingLoadResult<Post>> loader = new PagingLoader<PagingLoadConfig, PagingLoadResult<Post>>(
    proxy);
loader.setRemoteSort(true);
// This last piece - instead of 2.x where the loader is a parameter to the store,
// in 3 you directly wire the results of the loader to add the items into the
// store, as discussed in the first half of this answer
loader.addLoadHandler(new LoadResultListStoreBinding<PagingLoadConfig, Post, PagingLoadResult<Post>>(store));

Answer 2

FWIW 我加了远程分页和排序网格的 GWTP 调度版本。 这是具有命令模式扭曲的 GWT RPC。

假设你熟悉网格，你将需要一个实例：

• RpcProxy
• PagingLoader
• LoadResultListStoreBinding

以及需要调用的方法：

• PagingLoader.setRemoteSort(true)
• PagingLoader.addLoadHandler()
• Grid.setLoader()
• PagingToolBar.bind()