properties of two models are not shown in grid with ExtJS

Question

I have two models(Cliente and Pago) and put them together in a third model (Modelo), but at the time of linking the data to show them in the grid I have not been able to make it display the information I have in the two models, The json that returns my method if it gets data.

How can I do to rendering or display my registration data?

Model Modelo

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

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

Model Cliente

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

Model Pagos

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

I already try placing model.property but it does not work.

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

Answer 1

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