Nested JSON and Associations with Sencha Touch

Question

This is a two-parter question here. The first is a technical question about how Sencha parses JSON and reads stores.

I have two models, Order and User:

Ext.regModel('Order', {
  fields: [
    {name: 'id', type: 'int'},
    {name: 'user_id', type: 'int'},
    {name: 'name', type: 'string'},
    {name: 'price', type: 'float'},
  ],
  belongsTo: 'User'
});

Ext.regModel('User',{
  fields: [
    {name: 'id', type: 'int'},
    {name: 'first_name', type: 'string'},
    {name: 'last_name', type: 'string'},
    {name: 'email', type: 'string'},
  ],
  associations:[
    {type: 'hasMany', model: 'Order', name: 'orders'}
  ]
});

Overall, a pretty simple association. I have the following JSON that is retrieved from the server:

[
  {
    "id":22,
    "price":0.0,
    "name":"My First Order",
    "user_id":3,
    "user": {
      "id": 3,
      "first_name": "Michael",
      "last_name": "Jones",
      "email": "[email protected]"
    }
  }
]

Lastly, here is my store:

var o = new Ext.data.Store({
    model: "Order",
    sorters: "name",
    getGroupString: function(record){
        return record.get('name')[0]
    },
    proxy: {
        type: 'ajax',
        url: '/orders',
            headers: {'Accept': 'application/json'},
            reader: {
             type: 'json'
            }
    },
    autoLoad: true
});

Ext.regStore("Orders",o);

When I read the order data, I can't find any mention of the user. So, then I found this handy guide in the Sencha documentation: http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Reader

However the documentation only shows an example for a hasMany association - it doesn't include one pulling data from a belongsTo association. I tried scouring the internet for a couple hours and came up empty-handed. What is the proper way to retrieve the user field from an order field?

UPDATE: I removed the proxy and autoLoad parameters in my store and replaced it with a data parameter, which contained the same exact string of JSON returned by my server in my example. And guess what? It worked. However, I still need to fix this problem so that it will work when communicating with my server! Any ideas?

And the second part: What are your thoughts about Sencha Touch? The framework seems very powerful, but the documentation and examples seem rather weak. I'm also concerned by how difficult parsing this data has become. Are there better alternatives out there?

Jonathan Packer Jonathan Packer · Accepted Answer · 2011-07-22T00:37:20

I am rather new to Sencha as well and can't answer your question per se, but since you say it works when you load the data directly, a work-around could be to get the JSON object with a plain Ext.Ajax.request() and then use o.loadData(theData).

Also, have you seen this http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.BelongsToAssociation?

As to your second question, Sencha's documentation obviously could be better, but compared to the usual shit you get with API's I think it is actually quite good - finding obscure config options is something you will have to do no matter what framework you choose.

I have really liked it's style + animations; there is nothing out there that I know of that has the same level of "wow-factor"; I think this is worth perhaps writing your own data parser if you don't find an elegant solution. Customers don't buy/use products because the code is elegant or the data structures are especially robust; they buy them because they are snazzy or presented using a snazzy app.

The SASS+Compass integration also makes custom styling it so much easier than normal CSS.

Finally, I don't know if you need this, but I have been using the alpha of Sencha's "TouchCharts" (to be released in the next few months I think), and it is very impressive; animated charts (easing), interaction with data series (item tap, compare items, zoom), and the charts auto-update like dataviews.

Nested JSON and Associations with Sencha Touch

2 Answers