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

最新推荐文章于 2024-07-28 19:10:22 发布

xuecxuec

最新推荐文章于 2024-07-28 19:10:22 发布

阅读量932

点赞数

分类专栏： Ext EXTJS 文章标签： extjs servlet jsp 数据库 list header

Ext 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

EXTJS

2 篇文章 0 订阅

订阅专栏

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的心得，但是这是寡人亲身体会的宝贵经验，相信会很有用。我把特别需要注意的地方都用红字做了提醒，千万注意！

xuecxuec

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个ExtJS+jsp+Servlet与数据库连接且运行成功的例子

ExtJS虽然强大但是调试起来很困难。费尽周折但最终还是成功了。期间总结的技巧学习的知识我会在下一篇博文中加以总结。现在还是来粘代码吧。Servlet代码（注意我命名为List，有关List的配置文件web.xml相关映射名也为List，所以一会儿在js里通信引用应为List） package servlet;import java.io.IOException;
复制链接

扫一扫

专栏目录