一個ExtJS+jsp+Servlet與資料庫連接且運行成功的例子

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ExtJS雖然強大但是調試起來很困難。費盡周折但最終還是成功了。期間總結的技巧學習的知識我會在下一篇博文中加以總結。現在還是來粘代碼吧。

Servlet代碼（注意我命名為List，有關List的設定檔web.xml相關映射名也為List，所以一會兒在js裡通訊引用應為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;//相關bean，記錄學生資訊，有學號、姓名、性別、年齡。你需要自己完成編碼。
  StuDao dao=new StuDao();//資料庫操作方法集你需要自己完成編碼。
  ArrayList list=dao.selAll();//由dao調用selAll()方法可以查詢擷取資料庫表中所有學生資訊，你需要自己完成編碼。
  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代碼(當然你需要實現把ExtJS的組件添加到項目裡，其中 proxy:new Ext.data.HttpProxy({url:"List"})表示從List.java這個Servlet擷取資料)

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

  constructor:function()
  {
   MyEditorPanel.superclass.constructor.call(
    this,
    {
     title:"學生資訊列表",
     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:"學號",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"},
        {name:"stuAge"}
       ])
      )
     })
    }
   ) ;

  }}
) ;

Jsp代碼（注意需要引入的ExtJS的相關標頭檔。）

<%@ 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">
<html>
  <head>
    <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 is 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>學生資訊</title>
</head>

<body>

</body>
</html>
代碼部分結束

雖然是零起點寫有關ExtJS的心得，但是這是寡人親身體會的寶貴經驗，相信會很有用。我把特別需要注意的地方都用紅字做了提醒，千萬注意。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More