Extjs 4 Ext.data.Model: How to model nested objects

Question

I'm new to Extjs 4 and I'm trying to understand how to create a model for data that has nested objects.

Example Data:

{
  data1:{
      field1:1,
      field2:2,

      **objField1**:{
          objField1:1,
          objField2:2,

          **anotherObj**:{
             field1:1,
             field2:2,
             arrayofObjs:[
               {
                 //... 
               },
               //...
             ]
          }
      },

      objField2:{
          //... Some more fields or objects
      },

  data2:{
     //...
  }
}

I'm trying to understand how I would model this data. The fields are easy

Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
    {name: 'field1',  type: 'int'},
    {name: 'field2',   type: 'int'}
], //...

But how do you model the objects? I was thinking I could create a model for the sub-objects and setup associations, but after reading the documentation, they seem to need to have IDs. So if you look at the belongsTo page, "The owner model is expected to have a foreign key which references the primary key of the associated model".

I'm not looking to model data that has foreignkey relationships, just objects with sub-objects. So the server might return one JSON object with multiple sub-objects, and one of those objects I might want to tie to a grid, another object's data to a selectbox, etc.

Thanks!

they don't need ids if you return them all in the same response [and, optionally, write them to the server in the same request]. they only need ids if you are loading them in separate requests — Neil McGuigan
– Neil McGuigan, Commented Aug 14, 2012 at 17:58
you also don't need to use Models. You can get by with the raw json too. — Neil McGuigan
– Neil McGuigan, Commented Aug 14, 2012 at 18:15
You can try this solution: stackoverflow.com/questions/9891537/extjs-and-nested-models — ivy
– ivy, Commented Oct 9, 2013 at 12:34

Alex Tokarev · Accepted Answer · 2012-08-14 16:35:54Z

5

I think you have several problems here.

First, Models in Ext JS are mostly used to represent relational data, i.e. rows in SQL database. You can twist them to do whatever you want, but that doesn't mean it would be easy and there's always the question of "what for".

Second, Ext.data.Model is not suited at all for representing tree-like structures; you can use Ext.data.NodeInterface for that. NodeInterface is kinda class override for Model, a mixin in part, and generally is quite kludgy and rigid thing. The bright side is that it works, and the down side is that there's no other class that does the same stuff.

Next, nested data objects do not necessarily mean that they're actually related to each other. You said you want to pluck objects from one global JSON response; this can be done easily by configuring multiple Stores with different Readers and feeding them the same JSON object.

OTOH, the data structure looks a bit convoluted. Is that an attempt at preliminary optimization on the server side? I.e., put all stuff we might need into one huge JSON to save on server hits? If so, take a look at Ext.Direct remoting; it can save you from lots of headache down the road.

answered Aug 14, 2012 at 16:35

Alex Tokarev

4,8611 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jerinaw Over a year ago

Thanks Alex. I think your third suggestion is what I need to do. I thought I needed to have a model for the data. But if I can just create different stores and readers and point them to the same json object that should work. But will I be able to update/load more or new data into that json object and have the components (like a grid) update automatically? And yes the server only returns larges json objects. So I would query one something and get back a lot of data on it. I need all the data but want to display certain parts in different ways. Some of the data in a grid some in selectboxes etc

Alex Tokarev Over a year ago

By default, a Store will ask its Proxy to fetch the data, run it through Reader to parse, and then load it up as a set of instantiated Models. You can avoid multiple requests for the same data by configuring your Stores with the same Proxy instance (as opposed to config object) and feed that Proxy with different Reader configs each time you want to load a Store. Or you can create centralized Ajax handler that will parse JSON and feed it to different Stores. Any way it will be a lot of manual data munging, awkward and fragile; second approach is probably easier though.

Jerinaw Over a year ago

So how could I do your first suggestion above in MVC? Create a proxy instance in Ext.application.launch attach it to the application...or create some global proxy and when I define the stores...Sorry still new to Ext, trying to wrap my head around defining things, then at what point I can modify it. I want just one instance of the data, so like you said I would have one Proxy. Now I would need many stores with the same proxy...but at what point or how can I change the reader?

Collectives™ on Stack Overflow

Extjs 4 Ext.data.Model: How to model nested objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related