久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

一個ExtJS+jsp+Servlet與數(shù)據(jù)庫連接且運行成功的例子_

 小手&冰涼 2010-03-08

一個ExtJS+jsp+Servlet與數(shù)據(jù)庫連接且運行成功的例子

(2009-08-10 21:21:12)
標簽:

extjs

jsp

servlet

it

分類:IT技術(shù)整理

    老大要求我用更先進的技術(shù)實現(xiàn)表格的呈現(xiàn),。聽說ExtJS很強大,,其他小組也都用它很好的實現(xiàn)了頁面功能。于是搜集資料,,開始學習,。由于我們對功能要求并不高,但是需要同數(shù)據(jù)庫聯(lián)系,。所以我需要先實現(xiàn)將數(shù)據(jù)庫所有信息用ExtJS的grid顯示出來,。

    ExtJS雖然強大但是調(diào)試起來很困難。費盡周折但最終還是成功了,。期間總結(jié)的技巧學習的知識我會在下一篇博文中加以總結(jié)?,F(xiàn)在還是來粘代碼吧。

Servlet代碼(注意我命名為List,,有關(guān)List的配置文件web.xml相關(guān)映射名也為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;//相關(guān)bean,記錄學生信息,,有學號,、姓名、性別,、年齡,。你需要自己完成編碼,。
  StuDao dao=new StuDao();//數(shù)據(jù)庫操作方法集你需要自己完成編碼。
  ArrayList list=dao.selAll();//由dao調(diào)用selAll()方法可以查詢獲取數(shù)據(jù)庫表中所有學生信息,,你需要自己完成編碼,。
  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代碼(當然你需要實現(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:"學生信息列表",
     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的相關(guān)頭文件?。?/font>

<%@ 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"><!--注意Myeclipse里默認生成的jsp紅字部分是HTML 4.0,必須要改為XHTML 否則js顯示有問題-->
<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>
 

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

</body>
</html>
代碼部分結(jié)束

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

 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導購買等信息,,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請點擊一鍵舉報,。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多