Problem displaying nested model data in Sencha Touch XTemplate

I am using Sencha Touch to display nested (associated) model data in a list template but I can only get the root model data to display. My models are an Appointment which belongs to a Customer, and Customers have many Appointments. My model code:

Customer = Ext.regModel('Customer', {
hasMany: { model: 'Appointments', name: 'appointments' },
fields: [
  { name: 'id', type: 'integer' },
  { name: 'firstName', type: 'string' },
  { name: 'lastName', type: 'string' },
  { name: 'email', type: 'string' },
  { name: 'secondary_email', type: 'string' },
  { name: 'homePhone', type: 'string' },
  { name: 'mobilePhone', type开发者_开发问答: 'string' },
  { name: 'dob', type: 'date', dateFormat: 'Y-m-d' },
  { name: 'allowLogin', type: 'boolean' },
  { name: 'emailReminders', type: 'boolean' },
  { name: 'reminders_to_stylist', type: 'boolean' },
  { name: 'fullName',
    convert: function(value, record) {
      var fn = record.get('firstName');
      var ln = record.get('lastName');
      return fn + " " + ln;
    } }
 ]
 });

Appointment = Ext.regModel('Appointment', {
belongsTo: { model: 'Customer', name: 'customer' },
fields: [
  { name: 'id', type: 'string' },
  { name: 'startTime', type: 'date', dateFormat: 'c' },
  { name: 'customer_id', type: 'integer' },
  { name: 'startTimeShort',
    convert: function(value, record) {
      return record.get('startTime').shortTime();
    }
  },
  { name: 'endTimeShort',
    convert: function(value, record) {
      return record.get('endTime').shortTime();
    }
  },
  { name: 'endTime', type: 'date', dateFormat: 'c' } 
]
});

And my panel using an xtype: list looks like:

var jsonPanel = {
title: "Appointments",
items: [
  {
    xtype: 'list',
    store: appointmentStore,
    itemTpl: '<tpl for="."><span id="{id}">{startTimeShort} - {endTimeShort} <tpl for="customer"><span class="customer">{firstName}</span></tpl></span></tpl>',
    singleSelect: true,
    onItemDisclosure: function(record, btn, index) {
      Ext.Msg.alert('test');
    }
  }
]
};

The nested data gets loaded from JSON and appears to be loading correctly into the store - when I debug the appointment store object loaded from the Appointment model, I see that the appointment.data.items array objects have a CustomerBelongsToInstance object and that object's data object does contain the correct model data. The startTime and endTime fields display correctly in the list.

I have a suspicion that I am either not using the item template markup correctly, or perhaps there is some weird dependency where I would have to start from the model that has the "has many" association rather than the "belongs to" as shown in the kitchen sink demo.

I wasn't able to find any examples that used this type of association so any help is appreciated.

Looks like your Customer hasmany association is assigning Appointments when it should be appointment which is the name of that model.