ExtJS的電網加載嵌套的JSON數據

Question

我有一個PHP腳本，它返回以下JSON

[ 
    { 
     "Code":0, 
     "Message":"No problem" 
    }, 
    { 
     "name":"o016561", 
     "status":1, 
     "locks":[ 
     { 
      "ztn":"155320", 
      "dtn":"20131111", 
      "idn":"78" 
     }, 
     { 
      "ztn":"155320", 
      "dtn":"20131111", 
      "idn":"91" 
     } 
     ] 
    }, 
    { 
     "name":"o011111", 
     "status":1, 
     "locks":[ 
     { 
      "ztn":"155320", 
      "dtn":"20131111", 
      "idn":"91" 
     } 
     ] 
    }, 
    { 
     "name":"o019999", 
     "status":0, 
     "locks":[ 

     ] 
    }, 
    { 
     "name":"o020000", 
     "status":0, 
     "locks":[ 

     ] 
    }, 
    { 
     "name":"o020001", 
     "status":0, 
     "locks":[ 

     ] 
    } 
] 

編輯： 電網應該是這個樣子：

我已經能夠將name和status加載到我的網格 - 迄今爲止非常好。但更重要的部分是，我需要嵌入的數據在locks - 數組被加載到我的網格中，但我無法讓我的代碼工作。任何幫助，將不勝感激。

我使用ExtJS 4.2，如果這很重要。

編輯2：

我試圖

Ext.define("Locks", { 
    extend: 'Ext.data.Model', 
    fields: [ 
     'ztn', 
     'dtn', 
     'idn' 
    ] 
}); 

Ext.define("ConnectionModel", { 
    extend: 'Ext.data.Model', 
    fields: ['name', 'status'], 
    hasMany: [{ 
     model: 'Locks', 
     name: 'locks' 
    }] 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: "ConnectionModel", 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     reader: { 
      type: 'json', 
      root: 'name' 
     } 
    } 
}); 

，但它似乎是錯誤的以多種方式... 如果ztn和dtn可以顯示只是把它分成將是真棒同一列中的空格

Answer 1

您可以將renderer添加到列中。在該渲染器，你可以做任何記錄......

這裏的工作小提琴： http://jsfiddle.net/Vandeplas/MWeGa/3/

Ext.create('Ext.grid.Panel', { 
    title: 'test', 
    store: store, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Status', 
     dataIndex: 'status' 
    }, { 
     text: 'idn', 
     renderer: function (value, metaData, record, rowIdx, colIdx, store, view) { 
      values = []; 
      record.locks().each(function(lock){ 
       values.push(lock.get('idn')); 
      }); 
      return values.join('<br\>'); 
     } 
    }, { 
     text: 'ztn + dtn', 
     renderer: function (value, metaData, record, rowIdx, colIdx, store, view) { 
      values = []; 
      record.locks().each(function(lock){ 
       values.push(lock.get('ztn') + ' ' + lock.get('dtn')); 
      }); 
      return values.join('<br\>'); 
     } 
    }], 
    height: 200, 
    width: 600, 
    renderTo: Ext.getBody() 
}); 

注意

如果你有超過你的後端控制你最好改變形式的數據更像這樣：

{ 
    "code": 0, 
    "message": "No problem", 
    "success": true, 
    "data": [ 
     { 
      "name": "o016561", 
      "status": 1, 
      "locks": [ 
       { 
        "ztn": "155320", 
        "dtn": "20131111", 
        "idn": "78" 
       }, 
       { 
        "ztn": "155320", 
        "dtn": "20131111", 
        "idn": "91" 
       } 
      ] 
     }, 
     { 
      "name": "o011111", 
      "status": 1, 
      "locks": [ 
       { 
        "ztn": "155320", 
        "dtn": "20131111", 
        "idn": "91" 
       } 
      ] 
     } 
    ] 
} 

這樣你就不會將您的控制數據（成功，消息，代碼......）與您的數據混合在一起，並且代理正確地撿起它（這可能是您遇到問題的原因）。我添加了一個成功的布爾值=> Ext選擇它並進入失敗處理程序。它對你的異常處理有很大的幫助。

這裏是它的代理：

proxy: { 
    type: 'ajax', 
     api: { 
     read: ___URL____ 
    }, 
    reader: { 
     type: 'json', 
     root: 'data', 
     messageProperty: 'message' 
    } 
}