ext js - Collegamento ColumnModel a un oggetto JSON complesso

Question

Sto tentando di associare un oggetto JSON complesso (con proprietà nidificate) al modello di colonna di un GridPanel. IE: Voglio mappare le colonne griglie per, diciamo, report.customer_name e report.report_data.customer.desc dati prova:

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

quindi il mio columnmodel sarebbe qualcosa di simile

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 ha provato il dataIndex della colonna Dettagli come 'report_data.details' ma non ha funzionato ...

Qualcuno può dirmi se questo può essere fatto, e se sì, lanciare un esempio a me? Oppure devo semplicemente appiattire l'oggetto prima di leggerlo? grazie mille!

Answer 1

Se si utilizza un JsonReader o JsonStore è possibile stabilire una mappatura ad una proprietà di un valore dell'oggetto nidificato nella descrizione verbale:

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

Il modello colonna sarebbe poi riferimento a un DataIndex di 'dettagli' per quella colonna.

I dati inviati dal server devono essere leggermente diversi da quelli che contiene l'esempio. Il lettore sopra consumerebbe un oggetto di dati del modulo:

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