ExtJS load data to Form from Store with association

Question

I have a single form that has fields for a Employee Model and fields for Person Model.

Employee Model

Ext.define('App.model.Employee', {
    extend: 'Ext.data.Model',
    fields: [{
            name: 'EmployeeId',
            type: 'int'
        },  
        {
            name: 'PersonId',
            type: 'int'
        },
        'EmployeeNumber',
        'JoinDate'
    ],  
    belongsTo: 'App.model.Person'
});

Person Model

Ext.define('App.mode.Person', {
    extend: 'Ext.data.Model',
    fields: [{
            name: 'PersonId',
            type: 'int'
        },  
        'FirstName',
        'LastName'
    ],
    hasMany: {
        model: 'App.model.Employee',
        name: 'Employees'
    }   
});

My Store:

var store = Ext.create('Ext.data.Store', {
    model: 'App.model.Employee',
    autoLoad: false,
    autoSync: true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'api/employee/getemployee'
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data',
            messageProperty: 'message'
        }
    }
});

This is my actual JSON

"data": [{
        "EmployeeId": 5,
        "PersonId": 1,
        "EmployeeNumber": 2001,
        "JoinDate" : "",
        "Person": {
            "PersonId": 1,
            "FathersLast": "SMITH",
            "FirstName": "JOHN"
        }
    }],

My question is how does my json response (from server) should be structured in order to load store successful?

Answer 1

You can find explanation and sample code in Ext data package guide section "Loading Nested Data". Other example is in the heading of Association documentation. Both with sample JSON files showing the required structure.

Answer 2

After looking at your code and json structure i can recognize that each employee has a person object, so you need to correct your mapping. Instead of Defining hasMany relationship in person model, you should define hasOne relationship for person in employee.

hasOne: { model: 'App.mode.Person', name: 'Person' }

Please try this out. Your json structure looks good.