PDA

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



cahello
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'.

skirtle
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.

scottmartin
13 Jul 2012, 8:35 PM
Please have a look at the following thread:
http://www.sencha.com/forum/showthread.php?219981

Scott.

cahello
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?