1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    39
    Vote Rating
    0
    maren is on a distinguished road

      0  

    Default How to use datagrid/JSON/jsp

    How to use datagrid/JSON/jsp


    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

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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

  3. #3
    Ext User
    Join Date
    Dec 2008
    Location
    NYC
    Posts
    175
    Vote Rating
    0
    whodat is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    39
    Vote Rating
    0
    maren is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    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

  5. #5
    Ext User
    Join Date
    Dec 2008
    Location
    NYC
    Posts
    175
    Vote Rating
    0
    whodat is on a distinguished road

      0  

    Default


    Quote Originally Posted by maren View Post
    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.

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    23
    Vote Rating
    0
    monica is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext User
    Join Date
    Dec 2008
    Location
    NYC
    Posts
    175
    Vote Rating
    0
    whodat is on a distinguished road

      0  

    Default


    Quote Originally Posted by monica View Post
    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

  8. #8
    Ext User
    Join Date
    Nov 2007
    Posts
    23
    Vote Rating
    0
    monica is on a distinguished road

      0  

    Default


    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

  9. #9
    Ext User
    Join Date
    Dec 2008
    Location
    NYC
    Posts
    175
    Vote Rating
    0
    whodat is on a distinguished road

      0  

    Default


    Quote Originally Posted by monica View Post
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar