How to use datagrid/JSON/jsp

**maren** · 13 Jan 2009 7:40 AM

I'm trying to get the datagrid to work with json and jsp
this my file jsp

Code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
            pageEncoding="UTF-8" %>
                
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <%@ page language="java" import="java.sql.*"%>
        <%@ page language="java" import="java.io.*" %>
        <%@ page language="java" import="net.sf.json.*" %>
        <html>
        <head>
        <title>My JSP 'index.jsp' starting page</title>
        </head>
        <body>
<%
JSONObject essai = new JSONObject();
essai.put("firstname","thara");
        essai.put("occupation","aaaaa");
        essai.put("job","nnnnnn");
        out.print(essai);
        
        %>
</body>
        </html>

and this is my file js

Code:

Ext.onReady(function(){
    var ds = new Ext.data.Store({

        proxy: new Ext.data.HttpProxy({url:'index.jsp'}),
        reader: new Ext.data.JsonReader({
            root: "essai",
            fields:
            [{ name: 'firstname'},
            { name: 'occupation'},
            { name: 'job'}]
             //remoteSort : false,
            //autoLoad : true
    })
   
   
    });
    
    var grid = new Ext.grid.GridPanel(
    {
        ds:ds,
        cm: new Ext.grid.ColumnModel([
        {header : "Mynom", width: 8, dataIndex : 'firstname'},
        {header: "Myoccupation", width: 10, dataIndex: 'occupation'},
        {header: "Myjob", width: 10, dataIndex: 'job'}
        ]),
        viewConfig: {forceFit:true},
        width: 600,
        height: 300,
        collapsible: true,
        animCollapse: false,
        title: 'EmployeeInformation',
        iconCls: 'icon-grid',
        renderTo: document.body
    })
    
     ds.load()
    
});

and this my file html

Code:

<html>
<head>
  <title>Exemple JSON</title>
    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
    
    <!-- GC -->
     <!-- LIBS -->
     <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
     <!-- ENDLIBS -->

    <script type="text/javascript" src="lib/ext/ext-all.js"></script>
  <script type="text/javascript" src="ExampleJSON.js"></script>
    <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(shared/icons/fam/folder_go.png);
    }
    </style>
</head>
<body>

  <div id="sarra"></div> 
 </body>
</html>

On the screen i show just the datagrid without data

?Please help
Thanks

**jay@moduscreate.com** · 13 Jan 2009 8:02 AM

verify that the JSON is actually being rendered. Please show how it's being sent to the browser.

my gut feeling tells me that you're sending back something like:

Code:

{firstname : 'thara', occupation : 'aaaaa', job : 'nnnnn'}

which is wrong

**whodat** · 13 Jan 2009 8:06 AM

Code:

I'm trying to get the datagrid to work with json and jsp

JSONObject essai = new JSONObject();
essai.put("firstname","thara");
        essai.put("occupation","aaaaa");
        essai.put("job","nnnnnn");
        out.print(essai);

1) If you are using the simple json jar file to create your Serialized objects. it might not work. I used to use this jar for all my other JSON outputs, but EXT JS expects a certain format. Another alternative is to use FlexJSON @ http://flexjson.sourceforge.net/ They have a section on how JSON is expected in EXT JS and they accomodate for it. I'm not sure if the library you are using will have the right format.

2) You don't have a store set up but I see you have the following in your Grid Panel code

Code:

var grid = new Ext.grid.GridPanel(
    {
        ds:ds, - Where is this(Ext.data.Store) configured?

3) How do you plan on calling this JSP to return the JSON output to you. I know a JSP is a servlet, but it would be easier to create a servlet and just have it return the JSON Data.

**maren** · 14 Jan 2009 12:11 AM

Originally Posted by jgarcia@tdg-i.com

verify that the JSON is actually being rendered. Please show how it's being sent to the browser.

my gut feeling tells me that you're sending back something like:

Code:

{firstname : 'thara', occupation : 'aaaaa', job : 'nnnnn'}

which is wrong

Hi,
when I execute the jsp on browser, I have this result:

Code:

{"firstname":"thara","occupation":"aaaaa","job":"nnnnnn"}

I don't know where is the problem

Is this fragment of code correct??:

Code:

essai.put("firstname","thara");
        essai.put("occupation","aaaaa");
        essai.put("job","nnnnnn");
        out.println(essai);

thanks

**whodat** · 14 Jan 2009 6:40 AM

Originally Posted by maren

Hi,
when I execute the jsp on browser, I have this result:

Code:

{"firstname":"thara","occupation":"aaaaa","job":"nnnnnn"}

I don't know where is the problem

Is this fragment of code correct??:

Code:

essai.put("firstname","thara");
        essai.put("occupation","aaaaa");
        essai.put("job","nnnnnn");
        out.println(essai);

thanks

I don't think that is correct. Read the JsonReader class and it shows what you need to pass back to the grid.

You need to add the following to your JSON response.

Code:

 totalProperty: 'results',
 root: 'rows',
 id: 'id'

More importantly, which JSON Serializer are you using? FlexJSON takes care of
the required properties EXT JS expects in the JSON output.

**monica** · 14 Jan 2009 7:24 AM

Sorry if I'm off-topic, but I don't have the rights to create a new thread

Just one question: how can flexJSON serialize the properties in the natural order? (and not alphabetical).

For example, to obtain :

Code:

{        "firstName": "William",         "address": "addr"     }

(which is the order of fields as declared in the class)

instead of the version alphabetically sorted by field's name:

Code:

{        "address": "addr",         "firstName": "William"     }

Thanks

**whodat** · 14 Jan 2009 7:44 AM

Originally Posted by monica

Sorry if I'm off-topic, but I don't have the rights to create a new thread

Just one question: how can flexJSON serialize the properties in the natural order? (and not alphabetical).

For example, to obtain :

Code:

{        "firstName": "William",         "address": "addr"     }

(which is the order of fields as declared in the class)

instead of the version alphabetically sorted by field's name:

Code:

{        "address": "addr",         "firstName": "William"     }

Thanks

Not sure, I don't know if they provide that for you.. But why would you need that out of curiosity?
Have you tried to to call includes

JSONSerializer.includes("address", "firstName").serialize(--Your Object--)

And see what happens

**monica** · 14 Jan 2009 7:50 AM

I need to create a grid with dynamic headers and data. This json data is parsed by a script js and then set to the Data Store and the ColumnModel of a GridPanel.

I've already tried that solution ...no luck

**whodat** · 14 Jan 2009 8:04 AM

Originally Posted by monica

I need to create a grid with dynamic headers and data. This json data is parsed by a script js and then set to the Data Store and the ColumnModel of a GridPanel.

cool, I would like to know how this is possible too. I did some searches on the forum for dynamic headers for a grid.. maybe they will help you

How to use datagrid/JSON/jsp

Thread Tools

Search Thread

Display

How to use datagrid/JSON/jsp

How to use datagrid/JSON/jsp