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

      0  

    Default Answered: Extjs:Navigation using Java servlets

    Answered: Extjs:Navigation using Java servlets


    Hello

    Here is my scenerio:
    I had 2 pages.
    1) Login page which is designed using the FormPanel - Used to authenticate user.(Added in the above post)
    2) Home page containing extjs Basic Grid showing all the existing users.
    Grid page

    Form
    Code:
             Ext.onReady(function(){
     
        var simple = new Ext.form.FormPanel({
     
            standardSubmit: true,
     
            frame:true,
            title: 'Login',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [{
                    fieldLabel: 'Username',
                    name: 'username',
                    id: 'username',
                    allowBlank:false
                },
                {
                    fieldLabel: 'Password',
                    name: 'password',
                   inputType:'password',
                    allowBlank:false
                },
                
                {
                    inputType: 'hidden',
                    id: 'submitbutton',
                    name: 'myhiddenbutton',
                    value: 'hiddenvalue'
                }
     
            ],
            buttons: [{
                text: 'Submit',
                handler: function() {
                simple.getForm().getEl().dom.action = 'ValidationServlet';
                simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit({
                                /*Success and Failure functions*/
                              
                                success:function(){
                                Ext.Msg.prompt('Status', 'Login Successful!', function(btn, text){
                       if (btn == 'ok'){
                                            var redirect = 'success.html';
                                         window.location = redirect;
                                       }
                        });
                  
    },
     
                // Failure function, see comment above re: success and failure.
                // You can see here, if login fails, it throws a messagebox
                // at the user telling him / her as much.  
    
                            failure:function(form, action){
                                if(action.failureType == 'server'){
                                    obj = Ext.util.JSON.decode(action.response.responseText);
                                    Ext.Msg.alert('Login Failed!', obj.errors.reason);
                                }else{
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                                }
                                simple.getForm().reset();
                            }
                                        
                                        
                                        
                                        });
                }
            }]
    
    
        });
        simple.render('mydiv');
     
    });
    And my servlet code is :
    Code:
    String result;
                                if ((nodeName.item(0).getChildNodes().item(0).getNodeValue().equals(user))&&(nodeGrade.item(0).getChildNodes().item(0).getNodeValue().equals("A")))
                                {    
                                  
                                    result="{success:true}";
                                }
                                else
                                {    
                                    result = "{success:false,errors:{reason:'Login failed.Try again'}}";
                                    
                                    }    
                                
                                pw.println(result);
    Here I print the JSON result on success and failure.They get printed based on conditions correctly.
    But,when I run the application it just prints the json result instead of returning it back to the success/failure function in the js file.

    Grid page
    Code:
    Ext.onReady(function() {
                    /*Tree panel*/
                    
        var treePan=Ext.create('Ext.tree.Panel', {
        id:'candTree',
        renderTo: 'tree',
        title: 'Simple Tree',
        width: 200,
        height: 300,
        useArrows:true,
        
        frame: true,
        
        root: {
            text: 'Root',
            expanded: true,
            
            children: [
                {
                    text: 'Child 1',
                    id:'CH1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    id:'CH2',
                    leaf: true
                },
                {
                    text: 'Child 3',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                }
            ]
        }
    });
    
    
    /*Handling tree Events*/
    
            treePan.getSelectionModel().on('select', function(selModel, record) {
            
            if (record.get('leaf')) {
                //Ext.getCmp('candGrid').layout.setActiveItem(record.getId() + '-panel');
                
                if(record.getId()=='CH1')
                {
                //window.alert('THis is'+record.getId() +'-panel');
                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:'countryname',type: 'string'}]
           });
    
           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'
                  },
                  
              }
              
           });                            
            
            
            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"
        }),    
                id:'candGrid',
                height: 300,
                width: 902,
                title: 'Company List',
                region:'center',
                renderTo: 'grid-company',
                viewConfig: {
                            stripeRows: true
                    }        
            });
                    store_company.load();
            }
            
            /*Second tree item value grid-Contains details of the users*/        
            
        }//If closed here
        });
    });
    Individually these pages are well displayed.

    Now i want to integrate these pages. Once the user is authenticated in login page i want to display the home page. So how to redirect or display the home page in extjs??

    I have used servlets at the backend(I am not familiar with frameworks).Instead of the grid page t displays the JSON result for the grid.

    I hope to get some help now.

    Regrds
    Sach

  2. Just as an aside... for "login" i always recommend using a simple html form, and then redirect/forward/etc to the "ext-js based application".

    With this approach, the login page will always load extremely fast. User's are used to "authentication taking a bit of time".

    Another trick is to download-ext-js-libs-in-the-background on the login page. Our apps are always https, and hence caching is thwarted (iirc), so preloading for the login-to-main-landing has (it seems) helped perceived performance in the past.

    (Back in ext-js-3 timeframe we had an alpha version of an app w/ ext-js-form-based login page that took 20 seconds to load (I think i tested on a broadband cell modem w/ vpn & https).) I wanted really really fast login, then when you do get in, really really fast "app function transitions" (after the initial load).

    -jeff

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Please post in the appropriate forum. I have moved this to Ext JS 4 Q&A forum for you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,346
    Answers
    60
    Vote Rating
    32
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Your form is using "standardSubmit", which is synchronous:
    - http://docs.sencha.com/ext-js/4-0/#!...standardSubmit

    Therefore it never runs your callback methods.

    Given the fact you seem to want your login and home pages to be different files (is that right?) you should just use your servlet to redirect the page.

    Otherwise you shouldn't be using "standardSubmit" - and your callbacks would fire as you expect.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

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

      0  

    Default Navigation using java servlets

    Navigation using java servlets


    Thank you @arthurakay.
    Yes,I am using two different pages. I was able to fix the first part.The callbacks are working now.But the json response still not.I tried changing the content type to ("application/json"), but did not work.
    Some more details i think i should add.

    This is the code from my Validation servlet(works fine standalone).the callbacks are working
    Code:
           if (checkUser=="1")
                            {
                                  //Valid user
                                    result="{success:true}";
                                   
                            }
                            else
                            {        
                                    res.sendRedirect("failure.html");
                                    //pw.println("Invalid user");
                            }
                            
                            pw.println(result);
    The callback function is.
    Code:
        success:function(form,action){ 
                                
                                    alert('Status', 'Login Successful!', function(btn, text){
                       if (btn == 'ok'){
                                    var redirect = 'grid.html'; 
                                    window.location = redirect;
                                       }
                        });
                                },
    
                        failure:function(form, action){ 
                                if(action.failureType == 'server'){ 
                                    obj = Ext.util.JSON.decode(action.response.responseText); 
                                    Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                                }else{ 
                                    Ext.Msg.alert('Warning!',  'Authentication server is unreachable : ' +  action.response.responseText); 
                                }
    But,here in the callback I want it to redirect it to the grid.html(A page where I display a grid).
    Instead of redirecting it goes in the failure part and prints the JSON returned by the 2nd servlet(which fetches grid data.).This connects to the database and returns json.What want is on success the page to be redirected to the grid page and display the grid with content.

    The second servlet:

    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("application/json");
        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 = "";
        
        try {
          Class.forName(driver).newInstance();
          conn = DriverManager.getConnection(url+dbName,userName,password);
          System.out.println("Connected to the database");
         
        //  pw.println(query);
    
        String query1="select * from register";
            ps1 = conn.prepareStatement(query1);
            rs1 = ps1.executeQuery(query1);
                
    
            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);
                                                    
            }
            
         
         JSONObject jObjDevice = new JSONObject();
            jObjDevice.put("device", jArray);
            JSONObject jObjDeviceList = new JSONObject();
            jObjDeviceList.put("devicelist", jObjDevice );
        
        
            pw.println(jObjDevice.toString());
               
           conn.close();
        //     pw.println("Disconnected from database");
        }     catch (Exception e) 
        {
                    e.printStackTrace();
            }
      }
    }
    I have just started with Extjs and surely goin to go for the MVC spring framwork but before that I have to do something convincing as a POC and demo it,to move forward.

    Regards
    SachT

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

      0  

    Default


    Thank you mitchellsimoens
    Regards
    Sach

  7. #6
    Touch Premium Member jeffcrilly's Avatar
    Join Date
    May 2008
    Posts
    89
    Answers
    1
    Vote Rating
    0
    jeffcrilly is on a distinguished road

      0  

    Default


    Just as an aside... for "login" i always recommend using a simple html form, and then redirect/forward/etc to the "ext-js based application".

    With this approach, the login page will always load extremely fast. User's are used to "authentication taking a bit of time".

    Another trick is to download-ext-js-libs-in-the-background on the login page. Our apps are always https, and hence caching is thwarted (iirc), so preloading for the login-to-main-landing has (it seems) helped perceived performance in the past.

    (Back in ext-js-3 timeframe we had an alpha version of an app w/ ext-js-form-based login page that took 20 seconds to load (I think i tested on a broadband cell modem w/ vpn & https).) I wanted really really fast login, then when you do get in, really really fast "app function transitions" (after the initial load).

    -jeff