ExtJS 的网格中未显示两个模型的属性

properties of two models are not shown in grid with ExtJS

我有两个模型(Cliente 和 Pago)并将它们放在第三个模型(Modelo)中,但是在链接数据以在网格中显示它们时我无法让它显示我在两个模型中拥有的信息,json returns 我的方法如果它获取数据。

如何呈现或显示我的注册数据?

模型模型

public class Modelo
{
    public Pagos Pagos { get;  set; }
    public Cliente Cliente { get;  set; }

    public Modelo()
    {
        Pagos = new Pagos();
        Cliente = new Cliente();
    }
}

模特客户

public class Cliente
{
    public int IdCliente { get;  set; }
    public string Nombre { get;  set; }
    public int Comision { get;  set; }
    public int Estatus { get;  set; }
}

模型帕戈斯

public class Pagos
{
    public int IdPago { get; set; }
    public int IdCliente { get; set; }
    public Decimal Monto { get; set; }
    public bool Autorizacion { get; set; }
    public string Comentario { get; set; }
    public DateTime Fecha { get; set; }
}

我已经尝试放置 model.property 但它不起作用。

Ext.define('Modelo', {
    extend: 'Ext.data.Model',
    proxy: {
        type: 'ajax',
        reader: 'Home/GetPagosAutorizados'
    },
    fields: [
        { name: 'IdPago', type:'int' },
        { name: 'Cliente', type: 'string' },
        { name: 'Monto', type: 'float' },
        { name: 'Comision', type: 'int' },
        { name: 'Autorizacion', type: 'bool' },
        { name: 'Comentario', type: 'string' },
        { name: 'Fecha', type: 'string' }
    ]
});
    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Modelo.Pagos',
        proxy: {
            pageParam: false, //to remove param "page"
            startParam: false, //to remove param "start"
            limitParam: false, //to remove param "limit"
            noCache: false, //to remove param "_dc"
            //storeId: 'Data',
            // load using HTTP
            type: 'ajax',
            url: 'Home/GetPagosAutorizados',
            // the return will be XML, so lets set up a reader
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    });


    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {        
        bufferedRenderer: false,
        store: store,
        columns: [
            { text: "ID Pago", width: 120, dataIndex: 'Pagos.IdPago', sortable: true },
            { text: "Cliente", flex: 1, dataIndex: 'Cliente.Nombre', sortable: true },
            { text: "Monto", width: 125, dataIndex: 'Monto', sortable: true },
            { text: "Comisión", width: 125, dataIndex: 'Comision', sortable: true },
            { text: "Autorización", width: 125, dataIndex: 'Autorizacion', sortable: true },
            { text: "Comentario", width: 125, dataIndex: 'Comentario', sortable: true },
            { text: "Fecha", width: 125, dataIndex: 'Fecha:date', sortable: true }
        ],
        forceFit: true,
        height: 210,
        split: true,
        region: 'north'
    });
Ext.define('Modelo', {
    extend: 'Ext.data.Model',
    proxy: {
        type: 'ajax',
        reader: 'Home/GetPagosAutorizados'
    },
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
        //{ name: 'Author', mapping: '@author.name' },
        { name: 'IdPago', type: 'int', mapping: 'Pagos.IdPago' }, 
        { name: 'Nombre', type: 'string', mapping: 'Cliente.Nombre' },
        { name: 'Monto', type: 'float', mapping: 'Pagos.Monto' },
        { name: 'Comision', type: 'int', mapping: 'Cliente.Comision' },
        { name: 'Autorizacion', type: 'bool', mapping: 'Pagos.Autorizacion' },
        { name: 'Comentario', type: 'string', mapping: 'Pagos.Comentario' },
        { name: 'Fecha', type: 'string', mapping: 'Pagos.Fecha' }
    ]
});


var grid = Ext.create('Ext.grid.Panel', {        
    bufferedRenderer: false,
    store: store,
    columns: [
        { text: "ID Pago", width: 120, dataIndex: 'IdPago', sortable: true },
        { text: "Nombre", width: 120, dataIndex: 'Nombre', sortable: true },
        { text: "Monto", width: 125, dataIndex: 'Monto', sortable: true },
        { text: "Comision", width: 125, dataIndex: 'Comision', sortable: true },
        { text: "Autorización", width: 125, dataIndex: 'Autorizacion', sortable: true },
        { text: "Comentario", width: 125, dataIndex: 'Comentario', sortable: true },
        { text: 'Fecha', dataIndex: 'Fecha'  }
    ],
    //forceFit: true,
    height: 210,
    //split: true,
    region: 'north'
});