model-view-controller - Populating a Sencha Touch 2 form with associated models

Question

I am trying to take advantage of Sencha Touch 2's ability to handle associated models. In my case, suppose I have a Selection and Book: Selection <<--> Book. So, I have a record that could look like this:

{
    id: 123,
    position: 1,
    book: {
        title: 'War and Peace'
    }
}

Suppose I want to populate a FormPanel with a Selection record. When it's a flat record, there's lots of documentation about this on the Internet, and I've gotten it to work easily:

myFormPanel.setRecord(record);

When a form covers two associated models at once, this no longer works. A field dedicated to, say, book.title remains empty:

{
    xtype: 'textfield',
    name: 'title', // also tried 'book.title'
    label: 'Title'
}

Is there a way to populate Sencha Touch 2 forms automatically when the record is not flat? I could, of course, create a flat model specifically for this form, but that sort of defeats the purpose.

If there's no automated way, what's the next best alternative? Individually fetching fields from the FormPanel and setting their values?

Answer 1

Since there were no takers here, I went to Sencha Forums for help. The answer:

I need to create a flat object representation of the model like so:

var data = { id: 123, booktitle: 'War and Peace', ... }

and then populate the form with setValues():

myFormPanel.setValues(data);