An example of a extjs+jsp+servlet that is connected to a database and runs successfully

ExtJS, though powerful, is difficult to debug. It was a great effort but eventually succeeded. A summary of the skills of the learning knowledge I will be summarized in the next blog post. Now it's time to stick to the code.

Servlet Code (note I named list, the list of the configuration file Web.xml related mapping name is also list, so for a while in JS communication reference should be list)

Package servlet;

Import java.io.IOException;
Import Java.io.PrintWriter;
Import java.util.ArrayList;

Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;

Import DAO. Studao;

Import Vo. Stuvo;

public class List extends HttpServlet {

Public List () {
Super ();
}

public void Destroy () {
Super.destroy (); Just puts "destroy" string in log
Put your code here
}

public void doget (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Response.setheader ("Content-type", "text/html; charset=gb2312 ");
PrintWriter out = Response.getwriter ();
Stuvo stu=null;//related bean, record student information, have number, name, sex, age. You need to finish coding yourself.
Studao dao=new Studao ();//Database operation method set you need to do the coding yourself.
ArrayList List=dao.selall ()//The DAO calls the Selall () method to query for all student information in the database table, and you need to complete the encoding yourself.
int count=list.size ();
Out.print ("{results:" +count+ ", rows:[");
for (int i=0;i<count;i++) {
stu= (STUVO) list.get (i);
Out.print ("{stuid:") +stu.getstu_id () + "', Stuname: '" +stu.getstu_name () +
"', Stusex: '" +stu.getstu_sex () + "', Stuage: '" +stu.getstu_age () + "'");
if (i==count-1) {
Out.print ("}");
}
else{
Out.print ("},");
}
}
Out.print ("]}");
Out.print ("{results:2,rows:[{userid: ' 1 ', UserName: ' 1 ', Usersex: ' 1 ', userage: ' 1 '}," +
"{userId: ' 2 ', UserName: ' 2 ', Usersex: ' 2 ', Userage: ' 2 '}" +
This is the original sentence for easy observation.
//  "]}") ;

Out.flush ();
Out.close ();
}

public void DoPost (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Doget (Request,response);
}

public void Init () throws Servletexception {
Put your code here
}

}

JS code (of course you need to implement to add ExtJS components to the project, where Proxy:new Ext.data.HttpProxy ({url: "List"}) means to get data from List.java servlet

Myeditorpanel = Ext.extend (
Ext.grid.EditorGridPanel,
{

Constructor:function ()
{
MyEditorPanel.superclass.constructor.call (
This
{
Title: "Student Information List",
width:415,
Autoheight:true,
Border:true,
Collapsible:true,
Frame:true,

Loadmask:new Ext.loadmask (
Ext.get ("Editorpanel"),
Ext.getbody (),
{
msg: "Loading ..."
}
),
Enablehdmenu:false,
Footer:true,


Cm:new Ext.grid.ColumnModel ([
{header: "School Number", Dataindex: "Stuid"},
{header: "name", Dataindex: "Stuname"},
{header: "Gender", Dataindex: "Stusex"},
{header: "Age", Dataindex: "Stuage"}
]),
Ds:new Ext.data.Store ({
Autoload:true,
Proxy:new Ext.data.HttpProxy ({url: "List"}),
Reader:new Ext.data.JsonReader (
{
ID: "Stuid",
Totalproperty: "Results",
Root: "Rows"
},
Ext.data.Record.create ([
{name: ' Stuid '},
{name: ' Stuname '},
{name: ' Stusex '},
{name: ' Stuage '}
])
)
})
}
) ;

}}
) ;

JSP code (note the related header file of the ExtJS that needs to be introduced.) ）

<%@ page language= "java" import= "java.util.*" pageencoding= "gb2312"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" ><!--Note that the default generated JSP red Word section in MyEclipse is HTML 4.0 and must be changed to XHTML Otherwise JS shows a problem-->
<base href= "<%=basePath%>" >

<title>my JSP ' list.jsp ' starting page</title>

<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<link rel= "stylesheet" type= "Text/css" href= "Resources/css/ext-all.css"/>
<script type= "Text/javascript" src= "Ext-base.js" ></script>
<script type= "Text/javascript" src= "Ext-all.js" ></script>
<script type= "Text/javascript" src= "Ext-lang-zh_cn-min.js" ></script>
<script type= "Text/javascript" src= "List.js" > </script>
<script>
Ext.onready (function () {

var myeditorpanel = new Myeditorpanel ();
Myeditorpanel.render ("list");
}) ;
</script>

<title> Student Information </title>

<body>

<div id= "list" style= "height:150px; width:300px "></div>

</body>
End of Code section

Although it is 0 beginning to write about ExtJS, but this is a personal experience of precious experiences, I believe it will be very useful. I have to pay special attention to the place are used to remind the Red letter, do not pay attention to.