How to fill out a form with embedded JSON in Extjs 4

Question

I have a json like this

{ "success": true, "users": [{ "name":"Boom", "emails": [{ "first": " [e-mail] ", "second": " [e-mail] ", "countries":[{ "label":"pakistan", "continent":"asia" }] }] }] 

}

I created my models for this, like this

 Ext.define('WR.model.WorkRecord', { extend: 'Ext.data.Model', fields: ['name'], hasMany: {model: 'WR.model.Email', name: 'emails'} }); Ext.define('WR.model.Email', { extend: 'Ext.data.Model', fields: ['first', 'second'], belongsTo: {model : 'WR.model.WorkRecord', name: 'users'}, hasMany: {model: 'WR.model.Countries', name: 'countries'} }); Ext.define('WR.model.Countries', { extend: 'Ext.data.Model', fields: ['label', 'continent'], belongsTo: {model: 'WR.model.Email', name: 'emails'} }); 

Now I want to fill out my form with the identifier formJobSummary . I did it successfully for Non-Nested JSON by calling this function in the repository

 listeners: { load: function(users) { var form = Ext.getCmp('formJobSummary'); form.loadRecord(this.data.first()); } } 

My form has only simple display fields and I want to fill them through this nested JSON thanks

Answer 1

Currently, you cannot use name = 'property.subProperty' in the definition of a form field :(.

So, to do this work, I am returning a logical - adding a (redundant) field definition for the model:

 Ext.define('WR.model.WorkRecord', { extend: 'Ext.data.Model', fields: [ 'name', {name: 'emailFirst', mapping: 'emails.first'} ], hasMany: {model: 'WR.model.Email', name: 'emails'} }); 

then you can create a form field, for example:

 { xtype: 'displayfield', name: 'emailFirst', ... } 

And it will be populated on form.loadRecord ()

Answer 2

You need to subclass your Store and add requires config.

 Ext.define('MyJsonStore', { extend: 'Ext.data.JsonStore', requires: [ 'WR.model.WorkRecord' ] });