两个模型的属性没有显示在 ExtJS 的网格中答案

【问题标题】：properties of two models are not shown in grid with ExtJS两个模型的属性没有显示在 ExtJS 的网格中
【发布时间】：2018-07-24 16:55:42
【问题描述】：

我有两个模型（Cliente 和 Pago）并将它们放在第三个模型（Modelo）中，但是在链接数据以在网格中显示它们时，我无法让它显示我的信息在这两个模型中，如果获取数据，则返回我的方法的 json。

如何渲染或显示我的注册数据？

模型模型

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

【问题讨论】：

查看您的数据，返回数据中只有一个Pagos 和Cliente。您要呈现 2 条记录吗？
@EvanTrimboli 是的，因为我从两个模型中获取数据以将它们呈现在网格中，我该怎么做？
你能发布你的模型的定义吗？
@FabioBarros 已经把代码放在上面了
抱歉我不够清楚，我想看看你创建的 Ext.data.Model

标签： extjs sencha-touch sencha-touch-2 sencha-architect

【解决方案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'
});

【讨论】：