Extracting Nested JSON from Store Record? - sencha-touch-2

Question

I'm working from an example based on the comments in the Sencha documentation. I am able to extract the top-level information (id,name,last) but I can't figure out how to extract the products from each record. I was hoping that it would be as simple as requesting that part of the record but aProduct is always null:
var name = aRecord.get('name'); // Good
var lastName = aRecord.get('last'); // Good
var aProduct = aRecord.get('products'); // Null
I'm including all the code.
JSON:
[
{
"id": 1,
"name": "Ed",
"last": "Bar",
"products": [
{
"short_name": "Product1",
"name": "Another Product"
},
{
"short_name": "Product2",
"name": "Second Product"
}
]
},
{
"id": 2,
"name": "Foo",
"last": "Bar",
"products": [
{
"short_name": "Product1",
"name": "Another Product"
},
{
"short_name": "Product2",
"name": "Second Product"
}
]
}
]
app.js:
Ext.application({
name: 'SenchaFiddle',
models: ['Product', 'User'],
stores: ['UserStore'],
views: [],
controllers: [],
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Test...'
});
var userStore = Ext.getStore('UserStore');
console.log(userStore);
console.log('--- Data ---');
userStore.each(function (val) {
console.log(val.get('name'));
});
console.log('--- Done ---');
userStore.load({
params: {},
scope: this,
callback: function (records, operation, success) {
console.log("status=" + success);
console.log("Number Records=" + records.length);
for (var i = 0; i < records.length; i++) {
var aRecord = records[i];
console.log(aRecord);
var name = aRecord.get('name');
var lastName = aRecord.get('last');
var productList = aRecord.get('products');
console.log('(Short, First, Last)=(' + productList + ',' + name + ',' + lastName + ')');
for (var j=0; j<productList.length; j++) {
console.log(productList[j].name + " / " + productList[j].short_name);
}
}
}
});
}
});
User Model:
Ext.define('SenchaFiddle.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'last', type: 'string'}
],
// we can use the hasMany shortcut on the model to create a hasMany association
hasMany: {model: 'Product', name: 'products', "associationKey": 'products'}
}
});
Product Model:
Ext.define('SenchaFiddle.model.Product', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'short_name', type: 'string'},
{name: 'name', type: 'string'}
]
}
});
User Store:
Ext.define('SenchaFiddle.store.UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'SenchaFiddle.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json'
//rootProperty: 'users'
}
}
},
load: function () {
this.callParent(arguments);
console.log("User Store Loaded\n");
}
});

Answer 1

Nice work, you are very close!
Add a products field to your user model:
fields: ['products',
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'last', type: 'string'}
]
Stick w/Sencha, the whole package can be a little overwhelming and admittedly confusing (even after a couple years of use) but it definitely get better.
Brad