javascript ExtJS - 如何使用代理、模型？它们有什么关系？

ExtJS - How to use Proxy, Model? How are they related?

提问by jrharshath

I've been trying to learn to work with Models and Stores. But the proxy bit is confusing me a lot. So I'm going to list out my understanding here - please point out the gaps in my understanding.

我一直在努力学习使用模型和商店。但是代理位让我很困惑。所以我将在这里列出我的理解 - 请指出我的理解中的差距。

My understanding

我的理解

1. Models are used to represent domain objects.
2. Models can be created by ModelManager, or by simply using the constructor
3. Models are saved in Stores
4. Stores may be in memory stores, or can be server stores. This is configured using Proxy.
5. Proxy tells the store how to talk to a backing store - be that a JSON array, or a REST resource, or a simply configured URL via ajax.
6. Stores are responsible for storing models, and Proxies are responsible for controlling/helping with that task.
7. When a model's values are changed, its dirtyflag gets set. It gets automatically cleared when the model is saved. (more in this later)

1. 模型用于表示领域对象。
2. 模型可以由 ModelManager 创建，也可以简单地使用构造函数
3. 模型保存在 Stores 中
4. 存储可以在内存存储中，也可以是服务器存储。这是使用代理配置的。
5. 代理告诉存储如何与后备存储通信——无论是 JSON 数组、REST 资源，还是通过 ajax 简单配置的 URL。
6. 存储负责存储模型，代理负责控制/帮助完成该任务。
7. 当模型的值改变时，它的dirty标志被设置。保存模型时它会自动清除。（稍后会详细介绍）

The part that confuses me

让我困惑的部分

1. Why is there a proxyconfig and savemethod on Model? I understand that models can only be stored on to stores.
2. Why is the dirtyflag not cleared simply when I add a model object to a store?
3. When I add a model object to a store, why does the model not acquire the proxy configured with that store?
4. proxyis a static configuration for a Model. Does that mean that we cannot use objects of a particular model with multiple data sources? By extension, does this mean having multiple stores for a single model essentially useless?
5. When we define a Store, are we defining a class (store-type, if we may call it that), or is it an instanceof a store? Reason I ask is when we declare a grid, we simply pass it a store config as store: 'MyApp.store.MyStore'- does the grid instantiate a grid of that type, or is it simply using the store we've already instantiated?

1. 为什么模型上有proxy配置和save方法？我知道模型只能存储到商店。
2. 为什么dirty在将模型对象添加到商店时不会简单地清除标志？
3. 当我将模型对象添加到商店时，为什么模型没有获取该商店配置的代理？
4. proxy是模型的静态配置。这是否意味着我们不能使用具有多个数据源的特定模型的对象？推而广之，这是否意味着为一个模型拥有多个商店基本上毫无用处？
5. 当我们定义一个 Store 时，我们是在定义一个类（store-type，如果我们可以这样称呼它），还是一个 store的实例？我问的原因是当我们声明一个网格时，我们只是简单地将一个存储配置传递给它store: 'MyApp.store.MyStore'- 网格是实例化那种类型的网格，还是只是使用我们已经实例化的商店？

Thanks!

谢谢！

PS: +50 bounty to the person who explains all this :) - will offer bounty after those 48 hours are over..

PS：对解释这一切的人+50 赏金:) - 将在 48 小时结束后提供赏金..

回答by Molecular Man

The docssay:

文档说：

A Model represents some object that your application manages.

A Store is just a collection of Model instances - usually loaded from a server somewhere.

模型代表您的应用程序管理的某个对象。

Store 只是模型实例的集合 - 通常从某处的服务器加载。

---

---

Models are saved in Stores

模型保存在 Stores 中

Not only. The Models can be used separately (f.i. for populating forms with data. Check out Ext.form.Panel.loadRecordfor more info).

不仅。模型可以单独使用（fi 用于用数据填充表单。查看Ext.form.Panel.loadRecord了解更多信息）。

Why is there a proxy config and save method on Model? I understand that models can only be stored on to stores.

为什么模型上有代理配置和保存方法？我知道模型只能存储到商店。

As I've said, not only.

正如我所说，不仅如此。

Why is the dirty flag not cleared simply when I add a model object to a store?

为什么在将模型对象添加到商店时不会简单地清除脏标志？

Why should it? The Record becomes clean only when it gets synchronized with the corresponding record on the server side.

为什么要呢？只有当它与服务器端的相应记录同步时，记录才会变得干净。

When I add a model object to a store, why does the model not acquire the proxy configured with that store?

当我将模型对象添加到商店时，为什么模型没有获取该商店配置的代理？

This is, again, because model can be used without store.

这也是因为模型可以在没有存储的情况下使用。

proxy is a static configuration for a Model. Does that mean that we cannot use objects of a particular model with multiple data sources?

代理是模型的静态配置。这是否意味着我们不能使用具有多个数据源的特定模型的对象？

We cannot use objects of a particular model but we can use one model definition for multiple store. For example:

我们不能使用特定模型的对象，但我们可以为多个商店使用一个模型定义。例如：

Ext.define('MyModel', {
  // ... config
});
var store1 = Ext.create('Ext.data.Store', {
  model: 'MyModel',
  // ... config
  proxy: {
    // ...
    // this proxy will be used when store1.sync() and store1.load() are called
  }
  // ...
});
// ...
var storeN = Ext.create('Ext.data.Store', {
  model: 'MyModel',
  // ... config
  proxy: {
    // ...
    // this proxy will be used when storeN.sync() and storeN.load() are called
  }
  // ...
});

Since store1 and storeN use different proxies, the records, contained by these stores, may be completely different.

由于 store1 和 storeN 使用不同的代理，因此这些 store 包含的记录可能完全不同。

When we define a Store, are we defining a class (store-type, if we may call it that), or is it an instance of a store?

当我们定义一个 Store 时，我们是在定义一个类（store-type，如果我们可以这样称呼它），还是一个 store 的实例？

Yes, when we define a Store, we are defining a class.

是的，当我们定义一个 Store 时，我们就是在定义一个类。

Reason I ask is when we declare a grid, we simply pass it a store config as store: 'MyApp.store.MyStore' - does the grid instantiate a grid of that type, or is it simply using the store we've already instantiated?

我问的原因是当我们声明一个网格时，我们只是将一个商店配置作为 store 传递给它：'MyApp.store.MyStore' - 网格是否实例化了该类型的网格，或者它只是使用我们已经实例化的商店?

There are couple of ways to set store config for grid:

有几种方法可以为网格设置存储配置：

1. store: existingStore,
2. store: 'someStoresId',
3. store: 'MyApp.store.MyStore',

1. store: existingStore,
2. store: 'someStoresId',
3. store: 'MyApp.store.MyStore',

In the first and the second cases existing instances of stores would be used. In the third case newly created instance of 'MyApp.store.MyStore'would be used. So, store: 'MyApp.store.MyStore',is equal to

在第一种和第二种情况下，将使用商店的现有实例。在第三种情况下，'MyApp.store.MyStore'将使用新创建的实例。所以，store: 'MyApp.store.MyStore',等于

  var myStore = Ext.create('MyApp.store.MyStore', {});
  // ... 
    // the following - is in a grid's config:
    store: myStore,

---

---

UPDATE

更新

---

---

When a model is added to store and then the store's sync() is called, why is the model's dirty flag not cleared?

当一个模型被添加到存储然后调用存储的sync()时，为什么模型的脏标志没有被清除？

It should be cleared, unless reader, writer and server response are not set up properly. Check out writer example. There is dirty flag being cleared automaticaly on store's sync().

它应该被清除，除非读取器、写入器和服务器响应没有正确设置。查看作家示例。商店的sync() 上会自动清除脏标志。

---

---

if a model class is not given any proxy at all, why does it track its dirty status?

如果一个模型类根本没有任何代理，它为什么要跟踪它的脏状态？

To let you know if the record was changed since the creation moment.

让您知道自创建时刻以来记录是否已更改。

---

---

What is achieved by introducing the concept of Models syncing themselves to the server?

通过引入模型将自身同步到服务器的概念来实现什么？

Let's assume you are creating a widget which contains plain set of inputs. The values for this inputs can be loaded from db (this set of inputs represents one row in db table). And when user changes the inputs' values data should be sent to the server. This data can be stored in one record.

假设您正在创建一个包含普通输入集的小部件。此输入的值可以从 db 加载（这组输入代表 db 表中的一行）。当用户更改输入值时，数据应发送到服务器。这些数据可以存储在一个记录中。

So what would you use for this interface: one record or a store with only one record?

那么你会为这个界面使用什么：一条记录​​还是只有一条记录的商店？

Standalone model- is for widgets that represent one row in db table.
Store- is for widgets that represent set of rows in db table.

独立模型- 用于代表 db 表中一行的小部件。
存储- 用于表示 db 表中的一组行的小部件。

回答by ruffin

I'm coming from ExtJS 2.2 [sic] to 4, and the Model behavior and terminology threw me for a loop too.

我从 ExtJS 2.2 [原文如此] 到 4，模型行为和术语也让我陷入困境。

The best quick explanation I can find is from this postin the "Countdown to ExtJS 4" series on Sencha's blog. Turns out a Model acts like it does because it's "really" a Record.

最好的简单说明我能找到的是从这个帖子中的“倒计时ExtJS的4”系列上煎茶的博客。原来模型的行为就像它一样，因为它“真的”是一个记录。

The centerpiece of the data package is Ext.data.Model. A Model represents some type of data in an application - for example an e-commerce app might have models for Users, Products and Orders. At its simplest a Model is just a set of fields and their data. Anyone familiar with Ext JS 3 will have used Ext.data.Record, which was the precursor to Ext.data.Model.

数据包的核心是 Ext.data.Model。模型表示应用程序中的某种类型的数据 - 例如，电子商务应用程序可能具有用户、产品和订单的模型。最简单的模型只是一组字段及其数据。任何熟悉 Ext JS 3 的人都会使用 Ext.data.Record，它是 Ext.data.Model 的前身。

Here's the confusing part: A Model is botha model for the data you're using anda single instance of an object following that model.Let's call its two uses "Model quamodel" and "Model quaRecord".

下面是混淆的部分：模型是两个一对您所使用的数据模型和对象的下面该模型的单个实例。我们称它的两个用途为“Model quamodel”和“Model quaRecord”。

This is why its loadmethod requires a unique id (full stop). Model quaRecord uses that id to create RESTful URLs for retrieving (and saving, etc) a single Record worth ofdata. The RESTful URL convention is described hereand is linked to in this poston Sencha's blog that talks specifically about Model usage.

这就是为什么它的load方法需要一个唯一的 id（句号）。Model quaRecord 使用该 id 创建 RESTful URL，用于检索（和保存等）单个 Record 值的数据。RESTful URL 约定在此处进行了描述，并在 Sencha 博客上的这篇文章中链接到，该文章专门讨论了模型的使用。

Here are a few RESTful URLs formed to that standard to get you familiar with the format, which it appears ExtJS' Model does use:

以下是一些按照该标准形成的 RESTful URL，让您熟悉 ExtJS 模型确实使用的格式：

Operate on a Record with id of 1

对id 为 1的 Record进行操作

GET /people/1 <<< That's what's used to retrieve a single record into Model

return the first record with id of 2

返回id 为 2的第一条记录

DELETE /people/2

destroy the first record with id of 7

销毁id 为 7的第一条记录

POST /people/7?_method=DELETE

Etc etc.

等等等等。

This is also why Models have their own proxies, so that they can run RESTful operations via that URL modified to follow the conventions described in that link. You might pull 100s of records from one URL, which you'd use as your Store's proxy source, but when you want to save what's in the single Model (again, think "Model quaRecord" here), you might perform those Record-specific operations through another URL whose backend messes with one record at a time.

这也是模型拥有自己的代理的原因，以便它们可以通过修改后的 URL 运行 RESTful 操作，以遵循该链接中描述的约定。您可能会从一个 URL 中提取 100 条记录，将其用作 Store 的代理源，但是当您想保存单个模型中的内容时（再次考虑此处的“Model quaRecord”），您可能会执行这些记录-通过另一个 URL 进行特定操作，该 URL 的后端一次处理一条记录。

So When Do I use Stores?

那么我什么时候使用 Stores？

To store more than one instance of that Model, you'd slap them into a Store. You add lots of Models quaRecords into Stores and then access those "Models" to pull data out. So if you have a grid you'll naturally want to have all that data locally, without having to re-query the server for each row's display.

要存储该模型的多个实例，您可以将它们放入一个 Store。您添加大量的模型QUA记录进入商店，然后访问这些“模式”来拉动数据输出。因此，如果您有一个网格，您自然希望在本地拥有所有这些数据，而不必为每一行的显示重新查询服务器。

From the first post:

从第一篇文章：

Models are typically used with a Store, which is basically a collection of Model instances.

模型通常与 Store 一起使用，Store 基本上是 Model 实例的集合。

And, of course, the Stores apparently pull info from Model quaModel here to know what they're carrying.

而且，当然，商店显然从这里的Model quaModel 中获取信息，以了解他们携带的物品。

回答by Snehal Masne

I found it in the documentation of sencha App Architecture Part 2

我在 sencha App Architecture Part 2 的文档中找到了

Use proxies for models:

对模型使用代理：

It is generally good practice to do this as it allows you to load and save instances of this model without needing a store. Also, when multiple stores use this same model, you don't have to redefine your proxy on each one of them.

这样做通常是一种很好的做法，因为它允许您在不需要存储的情况下加载和保存此模型的实例。此外，当多个商店使用相同的模型时，您不必在每个商店上重新定义您的代理。

Use proxies for stores:

为商店使用代理：

In Ext JS 4, multiple stores can use the same data model, even if the stores will load their data from different sources. In our example, the Station model will be used by the SearchResults and the Stations store, both loading the data from a different location. One returns search results, the other returns the user's favorite stations. To achieve this, one of our stores will need to override the proxy defined on the model.

在 Ext JS 4 中，多个商店可以使用相同的数据模型，即使这些商店将从不同的来源加载它们的数据。在我们的示例中，Station 模型将由 SearchResults 和 Stations 存储使用，两者都从不同的位置加载数据。一个返回搜索结果，另一个返回用户最喜欢的电台。为了实现这一点，我们的一个商店需要覆盖模型上定义的代理。