PDA

View Full Version : Extjs:Navigation using Java servlets



sachintaware
15 Dec 2011, 5:07 AM
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


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 :


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


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

mitchellsimoens
15 Dec 2011, 1:11 PM
Please post in the appropriate forum. I have moved this to Ext JS 4 Q&A forum for you.

arthurakay
15 Dec 2011, 2:00 PM
Your form is using "standardSubmit", which is synchronous:
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-cfg-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.

sachintaware
15 Dec 2011, 9:35 PM
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


if (checkUser=="1")
{
//Valid user
result="{success:true}";

}
else
{
res.sendRedirect("failure.html");
//pw.println("Invalid user");
}

pw.println(result);


The callback function is.


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:



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

sachintaware
15 Dec 2011, 9:37 PM
Thank you mitchellsimoens
Regards
Sach

jeffcrilly
21 Dec 2011, 7:57 PM
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