PDA

View Full Version : Cannot load JSON into GridPanel



ebaggg
22 Jun 2009, 1:02 PM
Hey all-
Newbie question for simple ext-3.0-rc2 example. I couldn't find my answer in the forums or via extensive google searches. My JSON data looks like this:

{
"hits": "62",
"count": "62",
"assets": {
"asset": {
"@id": "14",
"displayName": "test1"
},
"asset": {
"@id": "8",
"displayName": "test2"
}
}
}

The API call (response) returns fine, but my grid never populates...and I have no errors. I tried using dot notation to set the 'root'...but nothing seems to work:

Ext.onReady(function() {
var httpProxy = new Ext.data.HttpProxy({
url: 'my_search_url.json',
method: 'GET'});

var store;

Ext.onReady(function()
{
var dataRecord = Ext.data.Record.create([
{name: '@id', type: 'string'},
{name: 'displayName', type: 'string'}
]);

store = new Ext.data.Store({
proxy: httpProxy,
reader: new Ext.data.JsonReader({root: "assets.asset"}, dataRecord)
});

var grid = new Ext.grid.GridPanel({
store: store,
renderTo:'grid-example',
columns: [
{id:'@id', header: "ID", width: 100, sortable: true, dataIndex: '@id'},
{header: "Name", width: 120, sortable: true, dataIndex: 'displayName'}
],
viewConfig: {
forceFit: true
},
width:600,
height:300,
title:'My Records'
});
store.load();
});
});

html layer:
<div id="grid-example"></div>

aconran
23 Jun 2009, 9:14 AM
Your root should be "assets" instead of "assets.asset".

Also flatten your JSON structure like so by removing the asset key and adding an array around the assets.


{
"hits": "62",
"count": "62",
"assets": [{
"@id": "14",
"displayName": "test1"
},{
"@id": "8",
"displayName": "test2"
}]
}

ebaggg
24 Jun 2009, 7:44 AM
That worked great. I was thinking I could use dot notation, but this is better anyway.