JsonReader + Grid problems

**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:

Code:

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:

Code:

{"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.

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

Code:

...
ds.load()

where it should be

Code:

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

Originally Posted by willogee

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:

Code:

<!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

Originally Posted by willogee

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

Originally Posted by jacksloc

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

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

Thanks!

**alfiewong** · 1 Mar 2007 8:29 PM

Originally Posted by jacksloc

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.

JsonReader + Grid problems

Thread Tools

Search Thread

Display

JsonReader + Grid problems

JsonReader + Grid problems

Similar Threads

problems with grid in a table

Problems With Grid and Lotus Domino

Grid in Border Layout problems

Help with JsonReader / combobox

Dynamic Grid Problems