How to set combox value on form from grid with nested data? Extjs 4.2 Mvc

Question

I have a grid that pops up an edit form with combobox. Before I show the view I load the combobox store. Then I set the values of the form using form.loadRecord(record);. This loads the primary record ok. But how do I load the associated data value that is tied to the combobox so the combobox's value is set correctly.

1. I know I can use setValue manually, but I guess I was thinking could be handled via a load form.

2. If my form has 3 fields lets say firstName lastName and then a combobox of ContactType. The firstName and lastName are in my primary record with ContactType being the associated record. If I change values in fields lastName or firstName a change is detected and the record is marked as dirty. If I change the combobox value the record is not marked as dirty. I am guessing because they are two different models. How to make it one record. I would think having a combobox on a form that has its values set from a record in a grid is common but I can't find any examples of best way to accomplish this.

Here is some code.

My json looks like this. Primary record has firstName lastName hasOne associated record is ContactType

{
   "__ENTITIES":[
      {
         "__KEY":"289",
         "__STAMP":12,
         "ID":289,
         "firstName":"a",
         "middleName":"",
         "lastName":"asd",
         "ContactType":{
            "__KEY":"2",
            "__STAMP":4,
            "ID":2,
            "name":"Home"
         }
      }
   ]
}

Controller list function,edit function and updatefunction, fires when grid row is clicked

list: function () {
       var mystore = this.getStore('Contacts')
       mystore.proxy.extraParams = { $expand: 'ContactType'};
       mystore.load({
        params: {
        },
        callback: function(r,options,success) {
     //       debugger;
        } //callback
    }); //store.load

        editContact: function (grid, record) {     
        //load store for combobox
        var store = this.getStore('ContactTypes');
        store.load({
            params: {
            },
            callback: function(r,options,success) {
        //    debugger;
            } //callback
        }); //store.load

        var view = Ext.widget('contactsedit');
        var form =  view.down('form')
        //load primary record
        form.loadRecord(record);
        //load associated record
        form.loadRecord(record.getContactType());

 updateContact: function (button) {
    var win = button.up('window'),
        form = win.down('form'),
        record = form.getRecord(),
        values = form.getValues(),
        store =  this.getStore('Contacts')
    if (form.getForm().isValid()) {
        if (this.addnew == true) {
            store.add(values);
        } else {
            record.set(values);
        }
        store.sync();
        win.close();
    }
}

The loadRecord(record.getContactType) is a getter to the associated data. I am able to get the associated data but not sure how to make it set the value in the combobox or how to get it to act as one record and detect changes automatically.

My Contacts Model

Ext.define('SimplyFundraising.model.Contact', {
    extend : 'Wakanda.model',
    requires:[
        'SimplyFundraising.model.ContactType'
    ],
    fields: ['firstName', 'middleName','lastName','ContactType.name'],
    associations: [
        {
            type: 'hasOne',
            model: 'SimplyFundraising.model.ContactType',
            name: 'ContactTypes',
            getterName: 'getContactType',
            associationKey: 'ContactType'

        }
    ]
});

ContactType model

Ext.define('SimplyFundraising.model.ContactType', {
    extend : 'Wakanda.model',
    fields: ['__KEY','name',]
});

1. Is this the proper way to set a value for a combobox in a form with nested data?

2. Should I not use associations and just put all fields in my Contact Model ie add all ContactType fields to Contact model, then data should be in the same record and change tracking would work. But this seems counter to the MVC pattern and counter to the reason for associations.

How do you guys handle this scenario, any examples would be great!

Thanks, Dan

Answer 1

if your form is loading the values correctly, then all you need to do is this:

Extjs4, How to set displayField in combo editor?