0

I'm confused about to how to properly use Models/Stores/Proxies/Readers in ExtJS 4. I've read the guides and looked at the examples, but still can't see the solution to my problem.

Goal: Say I am working with car objects (for which a model exists), which contain (among other things):

  • Car identifiers (VIN#, Make, Model, Year, Color, ect)
  • Ownership history
  • Maintenance history
  • Detailed list of car components (engine: {L-Twin cylinder, 2 valve per cylinder Desmodromic, air cooled}, front brake : {}, ...)

And assume I'm using the VIN# as a primairy key, and that I have a RESTfull API setup like

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

Now, if I have a reference to a VIN# in a controller, what I want to do is launch a complex dashboard that may have components like:

  • A grid for the car components
  • A chart for maintenance costs vs time
  • A custom panel for displaying the Make, Model, Year
  • ect

Problem: Say I have a Car model, and a CarComponent model, where my server is configured to send nested data (i.e. no API for dealing directly with CarComponent's). Ideally... I just want to request the car data from the server with a simple GET /car/<the vin #> and use the returned data to populate all the components of the complex dashboard. So my attempt strategy is:

  • Models: Car, CarComponent
  • Stores: Cars
  • Proxies: a single rest proxy attached to the Car model
  • somehow use nested properties of a Car to fill the components (ex. the grid of components)

Or do I need separate stores for the components? Also, I can't tell how the Stores work; I don't want to load all cars from the server.. just the specified one. I'm just confused on how to string together the models/proxies/stores to accomplish what I need...

4

1 回答 1

1

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

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

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

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

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

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

于 2013-09-14T14:20:42.367 回答