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

      1  

    Default Answered: EXT-JS java and Mysql

    Answered: EXT-JS java and Mysql


    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

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

  3. #2
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,695
    Vote Rating
    114
    Answers
    130
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default Error with JSON format

    Error with JSON format


    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

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default extjs java mysql

    extjs java mysql


    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]

  6. #5
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,695
    Vote Rating
    114
    Answers
    130
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    @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

  8. #7
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,695
    Vote Rating
    114
    Answers
    130
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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).
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  9. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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

  10. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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'
                  },
                  
              }
              
           });

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

      0  

    Default


    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

Thread Participants: 2