Mapping property from nested model into extjs form view

Question

I have a JSON like:

{
 "id": "d258832c-c454-4961-9013-40ab222930d9",
 "name": "CDS_BU",
 "description": null,
 "parentId": null,
 "group": {
   "id": "ef01eb78-2ae0-43ed-844e-57a825b046eb",
   "name": "GroupForCDSBU2"
 }
}

And I have a form and view for this object, but I am unable to show the current value for group.name in the form when loading.

The current form extends from Ext.form.Panel and I am using initComponent to assign the values to the form. IE

    me.items = [{
        name:       'name',
        xtype:      'textfield',
        fieldLabel: "Name"
    }, {
        name:       'description',
        xtype:      'textareafield',
        fieldLabel: "Comments"
    }]

This currently work and shows the values from description and name .

I have created a model for the group like:

Ext.define('GroupModel', {
  extend: 'Ext.data.Model',
  fields: [{
    name: 'id',
    defaultValue: null,
    type: 'string',
    useNull: true
  }, {
    name: 'name',
    defaultValue: null,
    type: 'string',
    useNull: true
  }]
});

And another model for the Parent Object which we will name Parent , like:

 Ext.define('ParentEditModel', {
   extend: 'Ext.data.Model',
   fields: [
   {
     name: 'name',
     defaultValue: ''
   }, {
    name: 'description',
    defaultValue: ''
   }
   ...
   ]

To this last model I tried a hasOne association

like:

   hasOne: {model: 'GroupModel', name: 'group' }

and added a new field to it with the following signature:

   {name: 'groupName', mapping: 'group.name'}

Obviously this does not work, because as far as I understand this needs an associationKey which I don't have in my current model .

In a nutshell, how can I map these two parameters (group: id, name) to inputs in the form view.

Answer 1

In this scenario you don't need an associated model, you can use the mapping in your parent model and no association key or anything else is required.

Here is a jsfiddle: http://jsfiddle.net/ncLvaupn/

 Ext.define('ParentEditModel', {
   extend: 'Ext.data.Model',
   fields: [
   {
     name: 'name',
     defaultValue: ''
   }, {
    name: 'description',
    defaultValue: ''
   }, {
    name: 'groupName',
    mapping: 'group.name'
   }
   ...
   ]