JsonReader + Grid problems [Archive]

alfiewong

28 Feb 2007, 5:24 AM

Hello,

I was wondering if somebody could help me because I'm not sure why my data isn't displaying in my grid. Here are the code snipits:

function getDataCallback(data)
{
var guests = Ext.data.Record.create([
{name: 'guest', mapping: 'guestName'},
{name: 'attendingReception', mapping: 'comingToReception'},
{name: 'attendingCeremony', mapping: 'comingToCeremony'}
]);

// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'guests',
id: 'guestName'
}, guests);

// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain
proxy: new Ext.data.MemoryProxy(data),
reader: reader,
remoteSort: true
});
ds.setDefaultSort('guest', 'desc');

var cm = new Ext.grid.ColumnModel([
{
header:'Guest',
dataIndex:'guest'
},
{
header:'Attending Ceremony',
dataIndex:'attendingCeremony',
hidden:!isInvitedToCeremony
},
{
header:'Attending Reception',
dataIndex:'attendingReception',
hidden:!isInvitedToReception
}]);

// create the editor grid
var grid = new Ext.grid.Grid('container', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true
});

// render it
ds.load();
grid.render();
}

here is how the JSON data is returned:

{"guests":[{"comingToReception":false,"guestName":"Lily Tran","comingToCeremony":false},{"comingToReception":false,"guestName":"Alfred Wong","comingToCeremony":false}]}

If there is something wrong with the setup of the grid please let me know but I think it looks right. I was wondering if I need to have some JSON library on the client side to use the JsonReader?

I was debugging through the code using FireBug and the part that keeps on dying is in the JsonReader code were it tries to get set the root object by using eval("o." + s.root).

I'm not sure if I'm doing something wrong or need something if somebody could help me out that would be great because I've spent way too long on trying to figure out what I'm doing wrong. :D

Thanks,
Alfred

alfiewong

28 Feb 2007, 5:56 AM

I noticed that I didn't pass the load call with my data. After doing that I'm still getting the same error whre it says "root has no properties".

...
ds.load()

where it should be

...
ds.load(data)

willogee

28 Feb 2007, 6:07 AM

I'm no expert (just starting on Ext myself) but I see a recent post (http://www.yui-ext.com/forum/viewtopic.php?t=3222) which seems to suggest the property "root" is required in the JSON output.

I'd be interested in seeing how you solve this.

Will

alfiewong

28 Feb 2007, 6:16 AM

I'm no expert (just starting on Ext myself) but I see a recent post (http://www.yui-ext.com/forum/viewtopic.php?t=3222) which seems to suggest the property "root" is required in the JSON output.

I'd be interested in seeing how you solve this.

Will

Thanks for the reply. I think that I did include one called guests that is the "key" to the list but I could be doing something wrong and I haven't really set it.

Thanks for trying though :)

Animal

28 Feb 2007, 6:59 AM

hidden:!isInVitedToCeremony won't work. You will have been ignoring errors. Run your page in Firefox with Firebug installed.

There is no variable "isInvitedToCeremony"

The hidden flag dictates whether the whole column is hidden.

This small page displays a grid. Drop it into the examples/grid directory:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>From Markup Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../lib.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<link rel="stylesheet" type="text/css" href="../examples.css" />
<script type="text/javascript">
function createGrid(data) {
var guests = Ext.data.Record.create([
{name: 'guest', mapping: 'guestName'},
{name: 'attendingReception', mapping: 'comingToReception'},
{name: 'attendingCeremony', mapping: 'comingToCeremony'}
]);

// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'guests',
id: 'guestName'
}, guests);

// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain
proxy: new Ext.data.MemoryProxy(data),
reader: reader,
remoteSort: true
});
ds.setDefaultSort('guest', 'desc');

var cm = new Ext.grid.ColumnModel([
{
header:'Guest',
dataIndex:'guest'
},
{
header:'Attending Ceremony',
dataIndex:'attendingCeremony',
},
{
header:'Attending Reception',
dataIndex:'attendingReception',
}]);

// create the editor grid
var grid = new Ext.grid.Grid('container', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true
});

// render it
ds.load();
grid.render();
}
Ext.onReady(function() {
createGrid({"guests":[{"comingToReception":false,"guestName":"Lily Tran","comingToCeremony":false},{"comingToReception":false,"guestName":"Alfred Wong","comingToCeremony":false}]} );
});
</script>
</head>
<body>
<div id="container" style="height:200px;width:500px"></div>
</body>

elygre

28 Feb 2007, 11:04 AM

I'm no expert (just starting on Ext myself) but I see a recent post (http://www.yui-ext.com/forum/viewtopic.php?t=3222) which seems to suggest the property "root" is required in the JSON output.

I'd be interested in seeing how you solve this.

Will

Being the author of that other post, I can see that it is a little less precise than desired... The "root" property can be called whatever you want, and in the example in this thread it is called "guests".

My wish is somewhat different, as I want the ability to remove the property altogether, referring to the outermost json object instead of a child object.

jack.slocum

28 Feb 2007, 11:14 AM

I've add a change for you to be able to do that:

var root = s.root ? eval("o." + s.root) : o;

elygre

28 Feb 2007, 12:19 PM

I've add a change for you to be able to do that:

var root = s.root ? eval("o." + s.root) : o;

Thanks! :D

alfiewong

1 Mar 2007, 8:29 PM

I've add a change for you to be able to do that:

var root = s.root ? eval("o." + s.root) : o;

Thanks Jack and Animal. Sorry I took so long to reply I will try the new revision out and see if that fixes anything. I'll keep you guys updated on the situation. :)