老大要求我用更先進的技術(shù)實現(xiàn)表格的呈現(xiàn)。聽說ExtJS很強大，其他小組也都用它很好的實現(xiàn)了頁面功能。于是搜集資料，開始學(xué)習(xí)。由于我們對功能要求并不高，但是需要同數(shù)據(jù)庫聯(lián)系。所以我需要先實現(xiàn)將數(shù)據(jù)庫所有信息用ExtJS的grid顯示出來。
ExtJS雖然強大但是調(diào)試起來很困難。費盡周折但最終還是成功了。期間總結(jié)的技巧學(xué)習(xí)的知識我會在下一篇博文中加以總結(jié)。現(xiàn)在還是來粘代碼吧。
Servlet代碼（注意我命名為List，有關(guān)List的配置文件web.xml相關(guān)映射名也為List，所以一會兒在js里通信引用應(yīng)為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;//相關(guān)bean，記錄學(xué)生信息，有學(xué)號、姓名、性別、年齡。你需要自己完成編碼。
StuDao dao=new StuDao();//數(shù)據(jù)庫操作方法集你需要自己完成編碼。
ArrayList list=dao.selAll();//由dao調(diào)用selAll()方法可以查詢獲取數(shù)據(jù)庫表中所有學(xué)生信息，你需要自己完成編碼。
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'}"+
// 這是便于觀察的原始句式。
// "]}") ;
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代碼(當(dāng)然你需要實現(xiàn)把ExtJS的組件添加到項目里，其中 proxy:new Ext.data.HttpProxy({url:"List"})表示從List.java這個Servlet獲取數(shù)據(jù))
MyEditorPanel = Ext.extend(
Ext.grid.EditorGridPanel,
{
constructor:function()
{
MyEditorPanel.superclass.constructor.call(
this,
{
title:"學(xué)生信息列表",
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:"學(xué)號",dataIndex:"stuId"},
{header:"姓名",dataIndex:"stuName"},
{header:"性別",dataIndex:"stuSex"},
{header:"年齡",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"},
