title: Sencha Touch belongsTo association using Store on Datalist
body: <p>I want to get belongsTo record on datalist and show parent record fields.</p>
  
  <pre><code>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: [
              '&lt;div&gt;Invoice # {InvoiceID}&lt;/div&gt;',
              '&lt;div&gt;{InvoiceDate}&lt;/div&gt;',        
              '&lt;div&gt;{Customer.Email}&lt;/div&gt;', // I want to show Customer name here as its belongsTo Customer
              ],
              listeners: {
                  itemtap:function (list, index, targe, rec, e, eOpts) {                    
                      console.log(rec)
                  }
              }
          }
          ] 
      }
  
  });
  </code></pre>
  
  <p>I want to show Customer name in datalist but having issue with association or Xtemplate
  I am getting this error</p>
  
  <pre><code>Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'Email' of undefined 
  </code></pre>
  
  <p>Please help me out in this.</p>