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