Sencha Touch belongsTo association using Store on Datalist - associations

Question

I want to get belongsTo record on datalist and show parent record fields.
Ext.define('MyApp.model.Customer', {
extend: 'Ext.data.Model',
config: {
fields: ['Id',
'EMail'],
hasMany: [{
model: 'MyApp.model.OutstandingInvoice',
name: 'OutstandingInvoice',
primaryKey: 'Id',
foreignKey: 'customerId',
foreignStore: 'OutstandingInvoices'
}]
}
});
Ext.define('MyApp.model.OutstandingInvoice', {
extend: 'Ext.data.Model',
config: {
fields: [
'InvoiceDate',
'InvoiceID',
'customerId'
],
belongsTo: [{
model: 'MyApp.model.Customer',
name: 'Customer',
primaryKey: 'Id',
foreignKey: 'customerId',
foreignStore: 'Customers'
}]
}
});
Ext.define('MyApp.store.OutstandingInvoices', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.OutstandingInvoice',
storeId: 'OutstandingInvoiceStore',
proxy: {
useDefaultXhrHeader: false,
type: 'ajax',
url : 'http://localhost/getOutstandingInvoices',
reader: {
type: 'json'
}
},
autoLoad: false
}
});
Ext.define('MyApp.store.Customers', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.Customer',
storeId: 'CustomerStore',
proxy: {
useDefaultXhrHeader: false,
type: 'ajax',
url : 'http://localhost/getCustJList',
reader: {
type: 'json'
}
},
autoLoad: false,
sorters: [{
property : 'FName',
direction: 'ASC'
}]
}
});
Ext.define('MyApp.view.OutstandingInvoices', {
extend: 'Ext.Panel',
xtype: 'outstandingInvoicesXType',
config: {
cls : 'invoiceSummaryCls',
scrollable: 'vertical',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Outstanding Invoices'
},
{
xtype : 'list',
scrollable: false,
store: 'OutstandingInvoiceStore',
cls : 'p10',
itemTpl: [
'<div>Invoice # {InvoiceID}</div>',
'<div>{InvoiceDate}</div>',
'<div>{Customer.Email}</div>', // I want to show Customer name here as its belongsTo Customer
],
listeners: {
itemtap:function (list, index, targe, rec, e, eOpts) {
console.log(rec)
}
}
}
]
}
});
I want to show Customer name in datalist but having issue with association or Xtemplate
I am getting this error
Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'Email' of undefined
Please help me out in this.

Answer 1

I'd recommend reading this article, its quite lengthy but the final List section is similar to your example.
I think the key point is you're not going to need separate stores. Sencha is going to create those automatically off the back of the associations. Make sure you move the proxies onto the models and set autoLoad: true