Navigation and form validation using servlet

  1. sachintaware
    sachintaware
    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
Results 1 to 1 of 1