Associated models with ExtJS

I was creating a dashboard page that was displaying a bunch of different data. Not wanting to be chatty, I was attempting to make a single server call to retrieve the snapshot of data. The data contained multiple models rolled into a single JSON result. The data looked something like this:

{
  success:true,
  results: {
    section: 'Foobar Dashboard',
    when: 'Today',
    foos: [
      { name: 'Thing 1', value: 20 },
      { name: 'Thing 2', value: 22 },
      { name: 'Thing 3', value: 15 },
      { name: 'Thing 4', value: 5 }
    ],
    bar1: { derps: 37.4, turkeys: 42.5},
    bar2: { derps: 1000.4, turkeys: 4}
  }
}

Structuring my model was the "tricky" part. I used the HasOne and HasMany associations.

HasOne needs the following config values set:
associationKey: maps the JSON data based on this key
getterName: name of the function to retrieve the model instance
instanceName: allows multiple instances of the same type under different names

HasMany needs the following config values set:
associationKey: maps the JSON data based on this key
name: name of the function to retrieve the store of instances

Ext.define('summary', (function () {
    'use strict';
    return {
        extend: 'Ext.data.Model',
        requires: [ 'foos', 'bar' ],
        fields: [{
                name: 'section',
                type: 'string'
            }, {
                name: 'when',
                type: 'string',
            }
        ],
        hasMany: [{
      model: 'foo',           // name of model
      name: 'foos',           // name of method to access store
      associationKey: 'foos'  // name of property in data
    }],
        hasOne: [{
      model: 'bar',           // name of model
      associationKey: 'bar1', // name of property in data
      instanceKey: 'bar1'     // name for instance of this model
      getterName: 'getBar1'   // name of method to access instance
    },{
      model: 'bar',           // name of model
      associationKey: 'bar2', // name of property in data
      instanceKey: 'bar2'     // name for instance of this model
      getterName: 'getBar2'   // name of method to access instance
    }],
        proxy: {
            type: 'ajax',
            api: {
                read: '/Dashboard/Summary'),
            },
            reader: {
                type: 'json',
                root: 'results',
                successProperty: 'success'
            }
        }
    };
}()));

Using this code is pretty straight forward.

var summaryModel = this.getModel('summary');
summaryModel.load(null, {
  scope: this,
  action: 'read',
  callback: function (record) {
    var bar1 = record.getBar1(); // this is a model instance
    var bar2 = record.getBar2(); // this is a model instance
    var foos = record.foos();    // this is a store containing all foo instances
  }
});

More information can be found in the ExtJS documentation http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.association.Association