Place information of a model with reference in a grid Extjs 6

Question

i try displaing model informations in a grid, but it don't display the information of the reference model.

My model Person

Ext.define('Myapp.model.Person',{
  extend: 'Ext.data.Model',
  idPropery: 'dni',
  fields: [
    "dni",
    {name:'age', type: 'int'},
    {name:'names', type: 'string'}
  ]
});

My model worker:

Ext.define('Myapp.model.Worker',{
  extend: 'Ext.data.Model',
  idPropery: 'idWorker',
  fields: [
    "idWorker",
    {name:'salary', type: 'int'},
    {name: 'personId', reference: 'Person', unique:true}
  ]
});

My Store:

Ext.define('Myapp.store.Worker',{
  extend: 'Ext.data.Store',
  alias: 'sworker',

    model: 'Myapp.model.Worker',

    autoLoad: true,
    proxy: {

        type: 'ajax',

        api: {
            read: 'allWorkers'
        },

        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }

    }
});

My json format:

data: [
    {"idWorker":'COD0001',"salary":2700,"person":{"dni":"57547854", "age": 22, "names": "Diana"}},
    {"idWorker":'COD0002',"salary":1700,"person":{"dni":"00257854", "age": 27, "names": "Carlo"},
    {"idWorker":'COD0003',"salary":5000,"person":{"dni":"54787854", "age": 18, "names": "Pedro"},
    {"idWorker":'COD0004',"salary":1800,"person":{"dni":"57547854", "age": 30, "names": "Ramon"}
    ],
total: 4

My grid:

Ext.define('Myapp.view.worker.WorkerList', {
    extend: 'Ext.grid.Panel',
    xtype: 'workerList',

    store: {
        type: 'sworker'
    },

    columns: [
       {text: 'My code', dataIndex: 'idWorker'},
       {text: 'Names ', dataIndex: 'names'},
       {text: 'Age ', dataIndex: 'age'},
       {text: 'Salary ', dataIndex: 'salary'}
    ],

    dockedItems: [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            displayInfo: true
        }]
});

The code above doesn't display 'names', 'age'. So I made some changing.

columns: [
       {text: 'My code', dataIndex: 'idWorker'},
       {text: 'Names ', xtype: 'templatecolumn', tlp: '{person.names}'},
       {text: 'Age ', xtype: 'templatecolumn', tlp: '{person.age}'},
       {text: 'Salary ', dataIndex: 'salary'}
    ]

but now doesn't work order for 'name' and 'age. Someone can help me please.

Answer 1

Please consider the folowing solution:

Check this FIDDLE

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            idPropery: 'idWorker',
            fields: [
                "idWorker", {
                    name: 'salary',
                    type: 'int'
                }, 
                {
                    name: 'age',
                    type: 'string',
                    mapping: "person['age']"
                },
                {
                    name: 'names',
                    type: 'string',
                    mapping: "person['names']"
                }
            ]
        });

        var store = Ext.create('Ext.data.Store', {

            model: 'MyModel',

            autoLoad: true,

            proxy: {
                type: 'memory',
                enablePaging: true,
                data: [{
                    "idWorker": 'COD0001',
                    "salary": 2700,
                    "person": {
                        "dni": "57547854",
                        "age": 22,
                        "names": "Diana"
                    }
                }, {
                    "idWorker": 'COD0002',
                    "salary": 1700,
                    "person": {
                        "dni": "00257854",
                        "age": 27,
                        "names": "Carlo"
                    }
                }, {
                    "idWorker": 'COD0003',
                    "salary": 5000,
                    "person": {
                        "dni": "54787854",
                        "age": 18,
                        "names": "Pedro"
                    }
                }, {
                    "idWorker": 'COD0004',
                    "salary": 1800,
                    "person": {
                        "dni": "57547854",
                        "age": 30,
                        "names": "Ramon"
                    }
                }],
                reader: {
                    //type: 'array'
                    type: 'json',
                    rootProperty: 'data'
                }
            }

        });

        var list = Ext.create('Ext.grid.Panel', {
            title: 'MyApp',
            renderTo: Ext.getBody(),

            store: store,

            columns: [{
                text: 'My code',
                dataIndex: 'idWorker'
            }, {
                text: 'Names ',
                dataIndex: 'names'
            }, {
                text: 'Age ',
                dataIndex: 'age'
            }, {
                text: 'Salary ',
                dataIndex: 'salary'
            }],

            dockedItems: [{
                xtype: 'pagingtoolbar',
                dock: 'bottom',
                displayInfo: true
            }]
        });

    }

});