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