ExtJS 4: Models with Associations and Stores

Konrad. I recently faced with dealing with Models+Associations+Stores. This wasn’t very pleasent experience. Here is what I’ve learned:

Let’s say we have Store1, Store2, Model1, Model2, Grid1, Grid2. Grid1 uses Store1, Store1 uses Model1 and similarly Grid2 uses Store2, Store2 uses Model2.

So far all is working, data is loading and so on.

But now we want to add hasMany association to Model1. Ok, we are adding to Model1’s config:

hasMany: {model: 'Model2', name: 'model2'}

After this you think that you can populate Store2 with data on Grid1’s itemclick by doing something like following:

Grid1.on('itemclick', function(view, item_which_uses_model1){
  //item_which_uses_model1.model2() supposed to return Model2's store
  item_which_uses_model1.model2().load();
}

You are expecting that Grid2 is populated with data on Grid1’s itemclick. But nothing happens. Actualy requests are being posted, responses are gotten. But Grid2 is not populated with data.
And after some time you are realising that item_which_uses_model1.model2() IS NOT Store2.

when Model2 “sees” that it has association with Model1 it creats Model1’s own store which is not equal to Store2.

It’s not cool, because Grid2 is using Store2.

Actualy you can hack it by, for example, adding to Grid2’s config:

store: new Model1().model2(),

but what if you are using ExtJS mvc pattern. Grid2 doen’t have to know anything about Model1.

I don’t recommend using associations in real world projects. At least now. Instead use approach which is shown in your example: Model+Store+Filtering.