Tuesday, May 28, 2013

EXTJS 4.X: showing nested data in grid columns

Here is the response:

{"orderRequest":[
   {
      "detail":"dfvdfvdfv"
      ,"id":"1"
      ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
      ,"orderRequestStatusId":"1"
      ,"purchaseOrderDate":"2013-05-28T00:00:00-05:00"
      ,"purchaseOrderNumber":"dfvdfv"
      ,"requestorName":"dfvd"
      ,"subject":"fv"
},{
   "detail":"wef"
   ,"id":"51"
   ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
   ,"orderRequestStatusId":"1","purchaseOrderDate":"2013-05-28T00:00:00-05:00"
   ,"purchaseOrderNumber":"wef"
   ,"requestorName":"wef"
   ,"subject":"wef"
},{
  "detail":"fv"
   ,"id":"101"
   ,"orderRequestStatus":{"id":"1","name":"registrada solicitud de pedido"}
   ,"orderRequestStatusId":"1"
   ,"purchaseOrderDate":"2013-05-28T00:00:00-05:00"
   ,"purchaseOrderNumber":"dfvd"
   ,"requestorName":"dfvd"
   ,"subject":"fv"}
]}

The model:

Ext.define('WebMonitorClass.model.OrderRequestModel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id'
            ,type: 'int'
        },{
            name: 'subject'
            ,type: 'string'
        },{
            name: 'detail'
                ,type: 'string'
        },{
            name: 'requestorName'
                ,type: 'string'
        },{
            name: 'orderRequestStatusName'
            ,type: 'string'
            ,mapping: 'orderRequestStatus.name' // here
        }               
    ]
    ,idProperty: 'id'    
});

Grid panel columns:

columns:[
            {
                text     : 'ID',
                flex     : 1,
                sortable : false,
                width    : 300,
                dataIndex: 'id'
            },
            {
                text     : 'Nombre Solicitante',
                width    : 150,
                sortable : true,
                dataIndex: 'requestorName'
            },{
                text     : 'Resumen',
                width    : 150,
                sortable : true,
                dataIndex: 'subject'
            },{
                text     : 'Detalle',
                width    : 150,
                sortable : true,
                dataIndex: 'detail'
            },{
                text     : 'Estado',
                width    : 150,
                sortable : true,
                dataIndex: 'orderRequestStatusName' // here
            }
        ]

Reference:
http://stackoverflow.com/questions/10500367/extjs-model-fields-with-subfields

No comments: