1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    30
    Vote Rating
    0
    rohangpatil is on a distinguished road

      0  

    Exclamation Help With Ext Grid and Json Data Store And JSP

    Help With Ext Grid and Json Data Store And JSP


    The Grid is called from this JSP

    Code:
    <%@
    pagelanguage="java"contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <
    html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <linkrel="stylesheet"type="text/css"href="ext/resources/css/ext-all.css">
    <linkrel="stylesheet"type="text/css"href="ext/examples/shared/examples.css"/>
    <linkrel="stylesheet"type="text/css"href="grid-examples.css"/> <scripttype="text/javascript"src="ext/adapter/ext/ext-base.js"></script>
    <scripttype="text/javascript"src="D:\Rohan\ext\ext-all-debug.js"></script> <title>Title</title> <scripttype="text/javascript"src="jsongrid.js">
    </script>
    </
    head> <body> <divid="example-grid"></div> </body>
    </html>



    Code:
    This is my Javascript code.
    Ext.onReady(function(){
    // create the Data Store var store = new Ext.data.JsonStore({ // load using HTTP url: 'Populate', id:'persStore', root:'names', totalProperty:'totalRows', feilds:[ {name:'firstName',type:'string'}, {name:'lastName',type:'string'}, {name:'age',type:'int'} ] });
    // create the grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "First Name", width: 150, dataIndex: 'firstName', sortable: true}, {header: "Last Name", width: 150, dataIndex: 'lastName', sortable: true}, {header: "Age", width: 100, dataIndex: 'age', sortable: true}, ], renderTo:'example-grid', width:525, height:200 });
    store.load(); });
    Populate is a servlet which will create a json string and put the string in a session variable and redirect to a page Called JsonData.jsp the jsp uses Expression language to put the json data. the code is shown below

    Code:
    <%@ page language="java" contentType="application/json" pageEncoding="UTF-8"%>
    ${sessionScope.jsondata}
    The servlet is working fine.. A dilouge box opens which asks if the user wants to save the json file.. The json file contains the following data.I am using the libraries provided by json.org to create this json data. and tinkering with the string to add the root and the totalRows in it.

    Code:
     
    {
    totalRows:4,
    names:
    [{"lastName":"Patil","age":23,"firstName":"Rohan"},{"lastName":"Cordeiro","age":23,"firstName":"Nicole"},{"lastName":"Kumar","age":23,"firstName":"Arun"},{"lastName":"Patil","age":23,"firstName":"Basavaraj"}]
    }
    I am getting an empty page with no output no grid. I cant use firebug and Firefox. just can use eclipse and notepad.

  2. #2
    Ext User
    Join Date
    Apr 2010
    Posts
    30
    Vote Rating
    0
    rohangpatil is on a distinguished road

      0  

    Default


    Okay now i have changed many things in my code.

    the grid.jsp looks like this.

    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <html>
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
      <link rel="stylesheet" type="text/css" href="ext/examples/shared/examples.css" />
        <link rel="stylesheet" type="text/css" href="grid-examples.css" /> 
      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="ext/ext-all-debug.js"></script>  
      <title>Title</title> 
      <script type="text/javascript" src="jsongrid.js">
      </script> 
    </head>
    <body>
    <div id="example-grid"></div>
    </body>
    </html>
    the jsongrid.js looks like this
    Code:
    /*!
     * Ext JS Library 3.1.1
     * Copyright(c) 2006-2010 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function() {
        
        var store = new Ext.data.JsonStore( {
            // load using HTTP
            url:'Populate',        
            root : 'names',
            totalProperty : 'totalRows',
            feilds : [ {
                name : 'firstName',
                type : 'string'
            }, {
                name : 'lastName',
                type : 'string'
            }, {
                name : 'age',
                type : 'int'
            } ]
        });
        alert("Ext JS is working!");
        // create the grid
            var grid = new Ext.grid.GridPanel( {
                store : store,
                columns : [ {
                    header : "First Name",
                    width : 150,
                    dataIndex : 'firstName',
                    sortable : true
                }, {
                    header : "Last Name",
                    width : 150,
                    dataIndex : 'lastName',
                    sortable : true
                }, {
                    header : "Age",
                    width : 100,
                    dataIndex : 'age',
                    sortable : true
                } ],
                renderTo : 'example-grid',
                width : 402,
                height : 200
            });
    
            store.load();
        });
    and the populate servlet looks like this. and Populate servlet is called via url property of JsonDataStore so there is a sligh improvement.

    Code:
    package controllers;
    
    import helper.JsonDataCreator;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.SQLException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    /**
     * Servlet implementation class Populate
     */
    public class Populate extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Populate() {
            super();
            // TODO Auto-generated constructor stub
        }
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            HttpSession session = request.getSession();
            System.out.println("Populate Called!!");
            try {
                String jsonData = new JsonDataCreator().getJsonPeopleString();
                PrintWriter out = response.getWriter();
                session.setAttribute("jsondata", jsonData);
                boolean scriptTag = false;
                String cb = request.getParameter("callback");
                if (cb != null) {
                    scriptTag = true;
                    response.setContentType("text/javascript");
                } else {
                    response.setContentType("application/x-json");
                }            
                if (scriptTag) {
                    out.write(cb + "(");
                }
                System.out.println(jsonData);
                out.println(jsonData);
                if (scriptTag) {
                    out.write(");");
                }
    
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (ClassNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
    
    }
    and the json string looks like this

    {
    totalRows:3,
    names:
    [{lastName:'Patil',age:23,firstName:'Rohan'},{lastName:'Kumar',age:23,firstName:'Arun'},{lastName:'Patilaaa',age:23,firstName:'Basava'}]
    }

    but still i am getting an empty grid.(better that empty page

    Any help will be greatly appreciated.

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    30
    Vote Rating
    0
    rohangpatil is on a distinguished road

      0  

    Default


    I must be hitting myself now ... i had made a spelling mistake in the javascript file .. instead of fields i had typed feilds !!!! and now its working !!! i am so happy

  4. #4
    Ext User
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    mahlatst is on a distinguished road

      0  

    Default Help with combo box and Json Data Store and Jsp

    Help with combo box and Json Data Store and Jsp


    Hi.

    I think you the right person to help me. Basically this is what I am struggeling to accomplish:

    (1) Generate JSON data at the server using JSP;
    (2) Finally, populating my combo box with this remote data.

    Your assistance will be greatly appreciated.

  5. #5
    Ext User
    Join Date
    Apr 2010
    Posts
    30
    Vote Rating
    0
    rohangpatil is on a distinguished road

      0  

    Default


    Hi,
    U want to generate JSON data using JSP ?
    i have used a servlet.. JSP is also fine but u have put a lot of scriptlets which is a bad practice and JSP will also be converted to a servlet at the end.
    1) To create a json string use the source files from this site http://www.json.org/java/ u can use either JSONObject source code or JSONArray source code.
    2)To Do that please read about Ext.data.JsonStore and how to Use Exts Xtemplate and Exts Panel and you are good to go....
    If you are stuck somewhere then please ask... But try try till you succeed .. And there are other people in this forum who are much better qualified .. Thanks

  6. #6
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382
    Vote Rating
    0
    Elijah is on a distinguished road

      0  

    Default


    Check to see if you have an empty space preceeding your data. Also for how I was using JSP I was able to get it to work with following format but I am not doing a servlet then forwarding off to a response page.
    Code:
    <%@ page contentType="text/html;charset=UTF-8" language="java" import="org.json.*" %>
    <%
    JSONObject obj = new JSONObject();
    //... set whatever your setting ....
    PrintWriter pw = response.getWriter();
    pw.write(obj.toString());
    pw.flush();
    %>

  7. #7
    Ext User
    Join Date
    Apr 2010
    Posts
    30
    Vote Rating
    0
    rohangpatil is on a distinguished road

      0  

    Default


    Actually a lot is changed the way i did it.. i directly used to write the response from the servlet without forwarding
    @Elijah- should the content type be application/json ?

  8. #8
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382
    Vote Rating
    0
    Elijah is on a distinguished road

      0  

    Default


    I recalled thinking it should be but when I got started it was not working for me. Then I tried the following. It worked so I did not bother changing it.
    Code:
    <%
    JSONObject obj = new JSONObject();
    //... set whatever your setting ....
    response.setContentType("text/xml");
    PrintWriter pw = response.getWriter();
    pw.write(obj.toString());
    pw.flush();
    %>
    Oh, and my page has a html section. in case someone calls it directly instead of throwing an error or something it just displays a html message. Thats why I have "<%@ page contentType="text/html..."

  9. #9
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382
    Vote Rating
    0
    Elijah is on a distinguished road

      0  

    Default


    But question. How exactly are you returning your data? are you doing a tostring method on it? I was initially trying to set up a servlet but the way I have it working I need for a JSONObject to be returned and for the Servlet that type is not allowed.

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    sachintaware is on a distinguished road

      0  

    Default extjs java mysql

    extjs java mysql


    Hello
    If your still following this.
    I am having a similar problem.This is my servlet which gives me the required jon format.
    Code:
    {"device":[{"id":1,"uname":"Sachin","fname":"Sachin","lname":"Taware","emailid":"sachi@gmail.com","statename":"MH","cityname":"Pune","countryname":"India"},{"id":2,"uname":"Rahul","fname":"Rahul","lname":"Dravid","emailid":"rdravid@gmail.com","statename":"KA","cityname":"Bangalore","countryname":"India"},{"id":3,"uname":"MS","fname":"MS","lname":"Dhoni","emailid":"ms@gmail.com","statename":"JH","cityname":"Ranchi","countryname":"India"},{"id":4,"uname":"viru","fname":"Virender","lname":"Sehwag","emailid":"viru123@gmail.com","statename":"DL","cityname":"Delhi","countryname":"India"}]
    Code:
    JSONArray jArray = new JSONArray();
            while(rs1.next())
    
            {
                    Integer id        = rs1.getInt(1);
                    String uname        = rs1.getString(2);
                    String fname        = rs1.getString(4);
                    String lname        = rs1.getString(5);
                    String emailid     = rs1.getString(6);
                    String statename   = rs1.getString(7);
                    String cityname       = rs1.getString(8);
                    String countryname = rs1.getString(9);
        
                    JSONObject jobj    = new JSONObject();
    
                //    jobj.put("id",id);
                    jobj.put("uname",uname);
                    jobj.put("fname",fname);
                    jobj.put("lname",lname);
                    jobj.put("emailid",emailid);
                    jobj.put("statename",statename);
                    jobj.put("cityname",cityname);
                    jobj.put("countryname",countryname);
    
                    jArray.add(jobj);
                
                            
            }
            
            //pw.println(jArray);        
         
         JSONObject jObjDevice = new JSONObject();
            jObjDevice.put("device", jArray);
            JSONObject jObjDeviceList = new JSONObject();
            jObjDeviceList.put("devicelist", jObjDevice );
        
            pw.println(jObjDevice);
    And the store is here.This is inside the html file i want the grid to be displayed.I get an empty grid with no records.And a firebug error of invalid json format.

    Code:
     Ext.onReady(function() {               
           Ext.define('Company', {
               extend: 'Ext.data.Model',
               fields: [
                        {name:'uname',type: 'string'},
                        {name:'fname',type: 'string'},
                        {name:'lname',type: 'string'},
                        {name:'emailid',type: 'string'},
                        {name:'statename',type: 'string'},
                        {name:'cityname',type: 'string'},
                        {name:'country',type: 'string'}]
           });
    
           var store_company = new Ext.data.Store({
              model: 'Company',
              proxy: {
                  type: 'ajax',
                  url: 'register',                   //Name of the servlet
      
                  reader: {
                      type: 'json',
                      root:'device'
                  },
                  
              }
              
           });