Ext.form.Panel load（）与loadRecord（）

Question

I have strange problem with loading form panel with json request response. In previous projects I used to load detail panel from grid store by using loadRecord(record) The store has associated model so record's embedded objects are mapped to model's properties and form renders those fields without any problem. Once I had to load form directly with response from form.load() I can't see properties from record's embedded objects. For example from json

{
   "message":null,
   "success":true,
   "data":{
      "code":"1",
      "name":"Canon Canada",
      "modifiedBy":null,
      "modifiedAt":null,
      "address":{
         "street":"6390 Dixie",
         "suite":null,
         "city":"Mississauga",
         "provinceCode":"ON",
         "postalCode":"L5T1P7"
      },
    ...
   }
}

I see rendered 'code' and 'name' properties, but not 'street' and 'city'.

Here is form.Panel code

Ext.define('App.view.billto.BillToDetailForm' ,{
    extend  : 'Ext.form.Panel'
    ,layout: 'form'
    ,alias  : 'widget.BillToDetailForm'
    ,autoHeight: true
    ,bodyPadding: 10
    ,fieldDefaults: MainAppViewConfig.fieldDefaults
    ,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
    ,items   : [    {   defaults: {xtype: 'textfield', allowBlank: false},
                items: [{name: 'code', fieldLabel:'Bill To Code'}
                    ,{name: 'name',fieldLabel: 'Name'}]}
            ,{  defaults: {xtype: 'textfield', allowBlank: false},
                items: [{name: 'address.suite', fieldLabel:'Suite'}
                    ,{name: 'address.street', fieldLabel:'Street'}]}
            ...         
        ]

    ,loadContentForCode: function(code){
        //this.getForm().trackResetOnLoad = true;
        this.getForm().load({   method: 'GET',url: 'billtoDetail',
                                params:{'code':code},
                                waitMsg: 'Loading...',
                                /*success:function(form, action) {
                                    console.log('BillToDetailForm:loadContentForCode callback on success '+this);
                                    var responseObj = Ext.JSON.decode(action.response.responseText,true);
                                    var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
                                    form.loadRecord(billToModel);
                                }*/
                    });
    }
});

As you can see I even did unsuccessful attempt to reload form in success handler.

Also I have noticed that var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data); hasn't properly populated model's fields 'street' and 'city'. That's also might be the cause of the problem.

Ext.define('MPS.model.BillToModel', {
    extend: 'Ext.data.Model'
    ,idProperty:'code'
    ,fields: [
         {name: 'code', type: 'string'},
         {name: 'name', type: 'string'},
         {name: 'street',mapping:'address.street', type: 'string'},
         {name: 'city', mapping:'address.city', type: 'string'},
        ...
    ]
});

Could you please point the real cause of the problem or advice any solution. Thank you.

Answer 1

I just made fiddle for you. Take a look how it is working and try the same with your code:

Sencha Fiddle - How associated data works

If this something that you are looking for just mark as answered.