ext js - Enlace de ColumnModel a un objeto json complejo

Question

Estoy intentando vincular un objeto json complejo (con propiedades anidadas) al modelo de columna de un GridPanel. IE: Quiero mapear las columnas cuadrículas para, digamos, report.customer_name y report.report_data.customer.desc datos prueba:

> { 
>  "success": true , 
>  "total": "1", 
>  "result": 
>   { 
>    "report": { 
>     "customer_name": "cust one", 
>     "account_number": "", 
>     "report_data": { 
>      "detail": "these are details", 
>      "desc": "mydesc"       
>     } 
>    } 
>  } } 

así que mi columnmodel sería algo así como

var colModel = new Ext.grid.ColumnModel([ 
     {header: "Customer", sortable: true, dataIndex: 'customer_name'}, 
     {header: "Account", width: 75, sortable: true, dataIndex: 'account_number'}, 
     {header: "Detail", width: 75, sortable: true, dataIndex:'HOW DO I DO THIS'} 
    ]); 

I intenté el dataIndex de la columna Detail como 'report_data.details' pero no funcionó ...

¿Alguien puede decirme si esto puede hacerse, y si es así, darme un ejemplo? ¿O simplemente necesito 'aplanar' el objeto antes de leerlo? muchas gracias!

Answer 1

Si está utilizando un JsonReader o JsonStore puede establecer una asignación a una propiedad de un valor de objeto anidado en la descripción de registro:

new Ext.data.JsonReader({ 
    root: 'result', 
    totalProperty: 'total', 
    fields: [ 
     {name: 'customer_name'}, 
     {name: 'account_number'}, 
     {name: 'detail', mapping: 'report_data.detail'} 
    ] 
}); 

Su modelo de columna entonces hacer referencia a un dataIndex de 'detalle' de esa columna

Sin embargo, los datos que envíe su servidor deberían ser ligeramente diferentes de los que contiene su ejemplo. El lector anterior consumiría un objeto de datos de la forma:

{ 
    "success": true, 
    "total": 1, 
    "result": [ 
     { 
      "customer_name": "cust one", 
      "account_number": "", 
      "report_data": { 
       "detail": "these are details", 
       "desc": "mydesc" 
      } 
     } 
    ] 
}