Разместите информацию о модели со ссылкой в ​​сетке Extjs 6

Я пытаюсь отобразить информацию о модели в сетке, но она не отображает информацию об эталонной модели.

Моя образцовая личность

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

Моя рабочая модель:

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

Мой магазин:

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'
        }

    }
});

Мой формат json:

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

Моя сетка:

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
        }]
});

Приведенный выше код не отображает «имена», «возраст». Так что я сделал некоторые изменения.

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

но теперь не работает порядок «имя» и «возраст». Кто-нибудь может мне помочь, пожалуйста.


person Oscar    schedule 18.08.2018    source источник


Ответы (1)


Пожалуйста, рассмотрите следующее решение:

Проверьте этот 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
            }]
        });

    }

});
person Fabio Barros    schedule 20.08.2018
comment
У меня это работает, но если я щелкну строку сетки и отобразлю запись, я увижу, что в рабочей модели есть dni, age, имена: Строка: {idWorker:COD0003,salary:5000,person:{dni:54787854,age: 18, имена: Педро}, возраст: 18, имена: Педро, идентификатор: MyModel-3}, тогда мне не нужна модель человека (ссылка: человек), однако я бы упустил передовую практику и причину, по которой существует ссылка в extjs. - person Oscar; 21.08.2018