View Full Version : How to read and display nested json in grid?

13 Jul 2012, 1:44 PM
When I try to read the nested data, nothing comes up. The code is:

Ext.define("User", {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
hasMany: {model: 'Order', name: 'orders'}, //associationKey: 'orders'},

Ext.define("Order", {
extend: 'Ext.data.Model',
fields: ['id', 'total'],
belongsTo: 'User',


var user_store = Ext.create('Ext.data.Store', {
storeId: 'user_store',
model: "User",
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'NestedJson-portlet/js/restdummy.json',
reader: {
type: 'json',
root: 'users'

Ext.create('Ext.grid.Panel', {
store: user_store,
id: 'user',
title: 'Rest Call Dummy Data',
columns: [{
header: 'id',
dataIndex: 'id'
}, {
header: 'total',
dataIndex: 'name'
height: 300,
align: 'stretch',
renderTo: 'viewnestedjson'

The json file is:

"users": [
"id": 123,
"name": "Ed",
"orders": [
"id": 50,
"total": 100,

How do I read and display 'id' and 'total' of "orders" in the grid column? I am able to display the users's 'id' and 'name' with the above code. However, I am not able to read/display 'orders'.

13 Jul 2012, 4:21 PM
Please use [CODE] tags when posting code.

To display the values of associations you'd have to provide a renderer on the column. The renderer has access to the whole record so you can pull out the associated values.

If you also need sorting to work that's a little tricky but it can be done by overriding the doSort method on the column.

13 Jul 2012, 8:35 PM
Please have a look at the following thread:


16 Jul 2012, 6:32 AM
I tried the thread posted. It works fine so long as the nested file does not have two roots. However, when I try to display the data within the "sub root", this method fails. What is the work around for this?