ExtJS：对模型包感到困惑

Question

我对如何在 ExtJS 4 中正确使用 Models/Stores/Proxies/Readers 感到困惑。我已经阅读了指南并查看了示例，但仍然看不到我的问题的解决方案。

目标：假设我正在使用 car 对象（存在模型），其中包含（除其他外）：

• 汽车标识符（VIN#、品牌、型号、年份、颜色等）
• 所有权历史
• 维护历史记录
• 汽车部件的详细清单（发动机：{L-双缸，每缸 2 个气门 Desmodromic，风冷}，前制动器：{}，...）

假设我使用 VIN# 作为主键，并且我有一个 RESTfull API 设置，例如

GET /car                 // gets list of cars
GET /car/123abc          // gets car with VIN# 123abc

现在，如果我在控制器中引用了 VIN#，我想做的是启动一个复杂的仪表板，它可能包含以下组件：

• 汽车部件的网格
• 维护成本与时间的图表
• 用于显示品牌、型号、年份的自定义面板
• 等

问题： 假设我有一个Car 模型和一个CarComponent 模型，我的服务器配置为发送嵌套数据（即没有用于直接处理CarComponent 的API）。理想情况下...我只想使用简单的GET /car/<the vin #> 从服务器请求汽车数据，并使用返回的数据填充复杂仪表板的所有组件。所以我的尝试策略是：

• 型号：Car、CarComponent
• 商店：Cars
• 代理：附加到Car 模型的单个休息代理
• 不知何故使用Car 的嵌套属性来填充组件（例如组件网格）

或者我需要为组件单独存储吗？另外，我不知道商店是如何运作的。我不想从服务器加载所有汽车.. 只是指定的汽车。我只是对如何将模型/代理/商店串在一起来完成我需要的事情感到困惑......

Answer 1

在这种情况下，您有一个单独的汽车网格和一个单独的组件网格，理想的设置是同时拥有处理 CarComponent 的 API。由于您提到情况并非如此，我建议定义两个单独的商店。他们会发出相同的 GET 请求来加载数据，但您将指定不同的 root readers。如果您的服务器返回的数据类似于：

{
    Car:
    {
        color:blue,
        CarComponent:
        {
            engine: {..}
        }
        ..
    }
}

然后一个商店（我们称之为 CarStore）将拥有阅读器根Car，而另一个商店（我们称之为 CarComponentStore）Car.CarComponent。这种方法的缺点是您每次都必须发出两个请求，一个针对 Car，另一个针对 CarComponent，即使返回的数据相同。但是，可以通过使用“主”和“从”存储的概念来避免这种情况，请参阅此 excellent answer 对其进行解释。

在 Car 网格中，您必须将商店设置为 CarStore，在 CarComponent 中设置为 CarComponentStore。通过正确定义阅读器根，两个网格都将“自动”填充来自响应的适当数据。

我不想从服务器加载所有汽车..

好吧，除非您不知道 VIN#，否则您不必这样做。大多数 API 都支持分页，因此您可以获取 10 乘 10 辆汽车，或者您可以包含 remote filtering 以过滤服务器端的记录。但第一个先决条件是知道您要取回哪辆车:-)