Question

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.

Answer 1

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