EXT-JS java and Mysql

**sachintaware** · 6 Dec 2011 1:21 AM

Hello
I am struggling a bit with displaying database values in a grid using java.This is the servlet which fetches the values from database and stores them in a Json array.

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.toString());

This is the json array that is created with the records from database.

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"}]

I have my script in an Html file.
But,now how can I pass the array to the store?
The problem I think is in the proxy and reader section(I have highlighted it).Can I pass the URL of the class file of the compiled servlet ??If not how to pass the json to the store?
Firebug shows me the same error of invalid json.

Code:

 <script type="text/javascript">
    
    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.class',    //Not sure if this is correct url:'register.class'"!!
              
              reader: {
                  type: 'json',
                  root:'device'
              },
              
          }
          
       });                             
        
        
        var grid_company = Ext.create('Ext.grid.Panel', {
                                      
            store: store_company,
                
                columns:[
                     
                {
                    text     : 'User Name',
                    width    : 120,
                    sortable : true,
                    
                    dataIndex: 'uname'
                },
                {
                    text     : 'Firstname',
                    width    : 120,
                    sortable : true,
                    dataIndex: 'fname'
                },
                {
                    text     : 'Lastname',
                    width    : 110, 
                    sortable : true,
                    dataIndex: 'lname'
                },
                {
                    text     : 'Email',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'emailid'
                },
                {
                    text     : 'State',
                    width    : 100, 
                    sortable : true,
                    dataIndex: 'statename'
                },
                {
                    text     : 'City',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'cityname'
                },
                {
                    text     : 'Country',
                    width    : 150, 
                    sortable : true,
                    dataIndex: 'countryname'
                }
            ],
             bbar: Ext.create('Ext.PagingToolbar', {
        store: store_company,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    }),    
            height: 210,
            width: 902,
            title: 'Company List',
            renderTo: 'grid-company',
            viewConfig: {
                        stripeRows: true
                }        
        });
        store_company.load();
    });
    </script>

Sach
www.optionsconsultancy.com

sachintaware

Works like CHARM!!!!!!!!!!!!!!

@tvanzoelen : Can you please explain me the need of the

Code:

actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"}

or point me to the documentation related to it?? It would be another favour on me.

Thanks to both of you tvanzoelen and tobiu for the help and time you gave.

Will get back to you in case I need any further help.

Regards
Sachin

**tobiu** · 6 Dec 2011 2:50 AM

your json is missing the last "}", probably a CC error.
http://jsonlint.com/ is worth a look.

you need to set the success property in your json as well, by default:

Code:

success: true

and yes, the store needs to know the correct url, otherwise it has no chance to fetch the data.

**sachintaware** · 6 Dec 2011 3:01 AM

Thanks for the response.
The "{" was a copy/paste error.

where do I set the property in the code?Is it in the js code mentioned above??

Code:

success:true

Also,the URL is correct but the way(passing the link of class file of the compiled servlet) is what I am not sure if its correct.If wrong please suggest the correct way.

Regards
Sachin

**sachintaware** · 6 Dec 2011 3:14 AM

I have made the following changes,please inspect and correct if needed.

Added the name of the servlet i.e register.

Code:

  var store_company = new Ext.data.Store({
          model: 'Company',
          proxy: {
              type: 'ajax',
              url: 'register',
              
              reader: {
                  type: 'json',
                  root: 'device',
                  success:'true'
              },
              
          }
          
       });

ERROR:Error I get is
http://localhost:8080/Dbext/register...art=0&limit=25
405 Method Not Allowed

Please guide me through this.

Regards
Sachin
www.optionsconsultancy.com

[IMG]chrome://firebug/content/blank.gif[/IMG]

**tobiu** · 6 Dec 2011 3:38 AM

json:

Code:

{"success":true, "device":...}

register seems to me not like an valid url, since it has no file ending (like register.html).

i am no java guy, so i can only help with the clientside issues.

**sachintaware** · 6 Dec 2011 3:48 AM

@tobiu
Thank you for your inputs.Yes I have tried the url's

Code:

url: 'register.class'

and

Code:

url: 'register.java'

but doesn't seem to work.

But i have implemented a similar example in php without the

Code:

success:"true"

and url working as,

Code:

url:'register.php'

Not sure why its not working in java.

Also,this error in firebug:ERROR:
http://localhost:8080/Dbext/register...art=0&limit=25 405 Method Not Allowed

I haven't encountered before.
Hope someone else has a look into it and helps me out.

Regards
Sachin

**tobiu** · 6 Dec 2011 3:58 AM

ok, next try:
http://www.checkupdown.com/status/E405.html

http://docs.sencha.com/ext-js/4-0/#!...-actionMethods

probably you are using get instead of post which is not allowed by your backend (or something similar).

**sachintaware** · 6 Dec 2011 4:07 AM

Well i will go through the links,but I have used doPost() in my servlet.Please ignore the commented code as i am still working on it,i have kept it.Really thankful for your responses.

Pasting the code for reference(For anyone who can help).

Code:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.sql.*;
import java.sql.*;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;


    public class register extends HttpServlet{ 
 
    Statement ps1 = null;
      ResultSet rs1 = null;            

   public void doPost(HttpServletRequest request, HttpServletResponse response)
                                   throws ServletException,IOException{
    response.setContentType("text/html");
    PrintWriter pw = response.getWriter();

     System.out.println("MySQL Connect Example.");
    Connection conn = null;
    String url        = "jdbc:mysql://localhost:3306/";
    String dbName   = "user_register";
    String driver   = "com.mysql.jdbc.Driver";
    String userName = ""; 
    String password = "";

    String username = request.getParameter("username");
    String user_pass = request.getParameter("password");
    String firstname = request.getParameter("firstname");
    String lastname = request.getParameter("lastname");
    String email = request.getParameter("email");
    String state = request.getParameter("state");
    String city = request.getParameter("city");
    String country = request.getParameter("country");
    Statement st;
    try {
      Class.forName(driver).newInstance();
      conn = DriverManager.getConnection(url+dbName,userName,password);
      System.out.println("Connected to the database");
      String query = "insert into register set 

username='"+username+"',password='"+user_pass+"',firstname='"+firstname+"',lastname='"+lastname+"',email=

'"+email+"',state='"+state+"',city='"+city+"',country='"+country+"'";
       st = conn.createStatement();
       int i = st.executeUpdate(query);

      if(i>0)
        {
                pw.println("<html>");
                pw.println("<Title>");
                pw.println("Register");
                pw.println("</Title>");
                pw.println("<body>");
                pw.println("<table width='100%' align='center'>");
                pw.println("<tr>");
                pw.println("<td width='100%' align='center' 

style='padding-top:100px;font-weight:bold;color:blue;'>");
                pw.println("You are Successfully entered the Record.");
                pw.println("</td>");
                pw.println("</tr>");
                pw.println("</table>");
                pw.println("</body>");
                pw.println("</html>");

        }
        else
        {
                  response.sendRedirect("register.html?error");
        }
    //  pw.println(query);

    String query1="select * from register";
        ps1 = conn.prepareStatement(query1);
        rs1 = ps1.executeQuery(query1);

/*Table for displaying the records */        

pw.println("<br>");
            pw.println("<b></b>");
            pw.println("<html><table border=''><tr>");
            pw.println("<td><b>Id</b></td>");
            pw.println("<td><b>Username</b></td>");
            pw.println("<td><b>First Name</b></td>");
            pw.println("<td><b>Last Name</b></td>");
            pw.println("<td><b>Email</b></td>");
            pw.println("<td><b>State</b></td>");
            pw.println("<td><b>City</b></td>");
            pw.println("<td><b>Country</b></td>");
            pw.println("</tr>");
            /*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);
                
                pw.println("<tr>");
                pw.println("<td>"+id+"</td>");
                pw.println("<td>"+uname+"</td>");
                pw.println("<td>"+fname+"</td>");
                pw.println("<td>"+lname+"</td>");
                pw.println("<td>"+emailid+"</td>");
                pw.println("<td>"+statename+"</td>");
                pw.println("<td>"+cityname+"</td>");
                pw.println("<td>"+countryname+"</td>");
                pw.println("</tr>");
            }

            pw.println("</table><br>");*/
            

        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);
        
       

  
      conn.close();
         pw.println("Disconnected from database");
    }     catch (Exception e) 
    {
                e.printStackTrace();
        }
  }
}

Thanks and Regards
Sachin

**tvanzoelen** · 6 Dec 2011 4:18 AM

Set on your proxy

Code:

actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"}

like:

Code:

var store_company = new Ext.data.Store({
          model: 'Company',
          proxy: {
              type: 'ajax',
              url: 'register',
              actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
              reader: {
                  type: 'json',
                  root: 'device',
                  success:'true'
              },
              
          }
          
       });

**sachintaware** · 6 Dec 2011 4:50 AM

Works like CHARM!!!!!!!!!!!!!!

@tvanzoelen : Can you please explain me the need of the

Code:

actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"}

or point me to the documentation related to it?? It would be another favour on me.

Thanks to both of you tvanzoelen and tobiu for the help and time you gave.

Will get back to you in case I need any further help.

Regards
Sachin

EXT-JS java and Mysql

Thread Tools

Search Thread

Display

Answered: EXT-JS java and Mysql

Answered: EXT-JS java and Mysql

Error with JSON format

Error with JSON format

extjs java mysql

extjs java mysql