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

Question

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 dirty flag gets set. It gets automatically cleared when the model is saved. (more in this later)

The part that confuses me

1. Why is there a proxy config and save method on Model? I understand that models can only be stored on to stores.
2. Why is the dirty flag 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. proxy is 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 instance of 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?

Thanks!

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

Answer 1

The docs say:

A Model represents some object that your application manages.

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

---

Models are saved in Stores

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

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.

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?

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

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?

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

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

  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?

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().

---

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.

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.