一个ExtJS+jsp+Servlet与数据库连接且运行成功的例子

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    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+"/";
%>

XHTML 1.0 Transitional//EN">

  
    
   
    
   
 
 
    
 
 




 
 
  

 

   

list" style="height:150px; width:300px">

  

代码部分结束

虽然是零起点写有关ExtJS的心得，但是这是寡人亲身体会的宝贵经验，相信会很有用。我把特别需要注意的地方都用红字做了提醒，千万注意！