1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    alfiewong is on a distinguished road

      0  

    Default JsonReader + Grid problems

    JsonReader + Grid problems


    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

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    alfiewong is on a distinguished road

      0  

    Default


    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)

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    14
    Vote Rating
    0
    willogee is on a distinguished road

      0  

    Default


    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

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    alfiewong is on a distinguished road

      0  

    Default


    Quote 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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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>

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    16
    Vote Rating
    0
    elygre is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


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

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

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    16
    Vote Rating
    0
    elygre is on a distinguished road

      0  

    Default


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

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    alfiewong is on a distinguished road

      0  

    Default


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

Similar Threads

  1. problems with grid in a table
    By jkelling in forum Ext 2.x: Help & Discussion
    Replies: 26
    Last Post: 1 Aug 2007, 10:59 AM
  2. Problems With Grid and Lotus Domino
    By jakehowl in forum Ext 2.x: Help & Discussion
    Replies: 69
    Last Post: 1 May 2007, 12:15 PM
  3. Grid in Border Layout problems
    By steven in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 26 Mar 2007, 8:49 PM
  4. Help with JsonReader / combobox
    By SteveEisner in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Mar 2007, 1:39 PM
  5. Dynamic Grid Problems
    By mikegiddens in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 2 Dec 2006, 9:08 PM

Thread Participants: 4