一个简单的extjs+jsp读取数据库信…

文件转自:http://blog.csdn.net/lhmfaint/article/details/7072696


 

JSP代码,调用JS文件

 

[html]  view plain copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <html>  
  9.     <head>  
  10.         <base href="<%=basePath%>">  
  11.         <link rel="stylesheet" type="text/css" href="css/ext-all.css" />  
  12.         <script type="text/javascript" src="js/ext-base.js">script>  
  13.         <script type="text/javascript" src="js/ext-all-debug.js">script>  
  14.         <script type="text/javascript" src="js/hello.js">script>  
  15.     head>  
  16.     <body>  
  17.     body>  
  18. html>  

JSP代码,读取数据库信息,并返回JSON数据

 

 

[html]  view plain copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%@ page import="java.sql.*"%>  
  3. <%@ page import="dao.Dbdao"%>  
  4. <%@page import="net.sf.json.JSONArray"%>  
  5. <%  
  6.     String path = request.getContextPath();  
  7.     String basePath = request.getScheme() + "://"  
  8.             + request.getServerName() + ":" + request.getServerPort()  
  9.             + path + "/";  
  10. %>  
  11. <%  
  12.     try {  
  13.         Dbdao dd = new Dbdao("com.mysql.jdbc.Driver",  
  14.                 "jdbc:mysql://localhost:3306/mydata", "root", "admin");  
  15.         Connection conn = dd.getConnection();  
  16.         Statement stmt = conn.createStatement();  
  17.         ResultSet rs = stmt.executeQuery("SELECT * FROM `mydata`");  
  18.         Map result = new HashMap();  
  19.         List list = new ArrayList();  
  20.         while (rs.next()) {  
  21.             Map dynBean = new HashMap();  
  22.             dynBean.put("company", rs.getString("company"));  
  23.             dynBean.put("price", rs.getString("price"));  
  24.             dynBean.put("change", rs.getString("change"));  
  25.             dynBean.put("pctChange", rs.getString("pctChange"));  
  26.             dynBean.put("lastChange", rs.getString("lastChange"));  
  27.             list.add(dynBean);  
  28.         }  
  29.         //使用store接收的功能  
  30.         result.put("totalCount", 100);  
  31.         result.put("list", list);  
  32.           
  33.         //JSONArray json = JSONArray.fromObject(result);  
  34.         //StringBuffer sb = new StringBuffer(json.toString());  
  35.         //System.out.println(sb.length());  
  36.         //String str=sb.toString().substring(1, sb.length()-1);  
  37.         //System.out.println(str);  
  38.         //out.write(str);  
  39.   
  40.         //使用jsonStore接收的功能  
  41.         JSONArray json = JSONArray.fromObject(list);  
  42.         StringBuffer sb = new StringBuffer(json.toString());  
  43.         System.out.println(sb.length());  
  44.         System.out.println(sb);  
  45.           
  46.         //sb.deleteCharAt(0).deleteCharAt(sb.length()-1);  
  47.         System.out.println("==" + sb.toString());  
  48.         response.setContentType("application/x-json");  
  49.         out.write(sb.toString());  
  50.         //sout.write(list.toString());  
  51.     } catch (Exception ex) {  
  52. ex.printStackTrace();  
  53.     }  
  54. %>  

JS文件

 

 

[javascript]  view plain copy
  1. Ext.onReady(function() {  
  2.          var store = new Ext.data.JsonStore({  
  3.              url: 'extjsjson.jsp',  
  4.              autoLoad: true,  
  5.              // idProperty: 'company',  
  6.              fields: ['company''price''change''pctChange','lastChange'],  
  7.              listeners : {  
  8.                  load : function(store,records,options) {  
  9.                     alert("JsonStore");  
  10.                  }  
  11.              }  
  12.          });  
  13. //          var store = new Ext.data.Store({  
  14. //                      proxy : new Ext.data.HttpProxy({  
  15. //                                  url : 'extjsjson.jsp'  
  16. //                              }),  
  17. //                      reader : new Ext.data.JsonReader({  
  18. //                                  root : "list",  
  19. //                                  totalProperty : "totalCount",  
  20. //                                  fields : ['price', 'company', 'change',  
  21. //                                          'pctChange', 'lastChange']  
  22. //                              }),  
  23. //                      remoteSort : true,  
  24. //                      listeners : {  
  25. //                          load : function(store, records, options) {  
  26. //                              alert("Store");  
  27. //                          }  
  28. //                      }  
  29. //                  });  
  30.   
  31.               
  32.             var grid = new Ext.grid.GridPanel({  
  33.                         store : store,  
  34.                         columns : [{  
  35.                                     id : 'company',  
  36.                                     header : 'Company11',  
  37.                                     width : 160,  
  38.                                     sortable : true,  
  39.                                     dataIndex : 'company'  
  40.                                 }, {  
  41.                                     header : 'Price',  
  42.                                     width : 75,  
  43.                                     sortable : true,  
  44.                                     dataIndex : 'price'  
  45.                                 }, {  
  46.                                     header : 'Change',  
  47.                                     width : 75,  
  48.                                     sortable : true,  
  49.                                     dataIndex : 'change'  
  50.                                 }, {  
  51.                                     header : '% Change',  
  52.                                     width : 75,  
  53.                                     sortable : true,  
  54.                                     dataIndex : 'pctChange'  
  55.                                 }, {  
  56.                                     header : 'Last Updated',  
  57.                                     width : 85,  
  58.                                     sortable : true,  
  59.                                     //renderer : Ext.util.Format  
  60.                                             //.dateRenderer('Y-m-d H:i:s'),  
  61.                                     dataIndex : 'lastChange'  
  62.                                 }],  
  63.                         stripeRows : true,  
  64.                         autoExpandColumn : 'company',  
  65.                         height : 500,  
  66.                         width : 600,  
  67.                         title : '表格',  
  68.                         stateful : true,  
  69.                         stateId : 'grid'  
  70.                     });  
  71.   
  72.             var win = new Ext.Window({  
  73.                         width : 600,  
  74.                         height : 450,  
  75.                         title : '标题',  
  76.                         items : [grid],  
  77.                         buttons : [{  
  78.                                     text : '增',  
  79.                                     // 增加按钮  
  80.                                     handler : function() {  
  81.                                         // insert()  
  82.                                     }  
  83.                                 }, {  
  84.                                     text : '删',  
  85.                                     // 删除按钮  
  86.                                     handler : function() {  
  87.                                         datadelete()  
  88.                                     }  
  89.                                 }, {  
  90.                                     text : '加载数据',  
  91.                                     handler : function() {  
  92.                                         // debugger;  
  93.                                         store.load();  
  94.                                     }  
  95.                                 }]  
  96.                     }).show();  
  97.         });  

JAVA文件,DAO层,获取数据库连接

 

 

[java]  view plain copy
  1. package dao;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.DriverManager;  
  5. import java.sql.PreparedStatement;  
  6. import java.sql.ResultSet;  
  7.   
  8. public class Dbdao {  
  9.     private Connection conn;  
  10.     private String driver;  
  11.     private String url;  
  12.     private String username;  
  13.     private String pass;  
  14.   
  15.     public Dbdao(String driver, String url, String username, String pass) {  
  16.         this.driver = driver;  
  17.         this.url = url;  
  18.         this.username = username;  
  19.         this.pass = pass;  
  20.   
  21.     }  
  22.   
  23.     public String getDriver() {  
  24.         return driver;  
  25.     }  
  26.   
  27.     public void setDriver(String driver) {  
  28.         this.driver = driver;  
  29.     }  
  30.   
  31.     public String getUrl() {  
  32.         return url;  
  33.     }  
  34.   
  35.     public void setUrl(String url) {  
  36.         this.url = url;  
  37.     }  
  38.   
  39.     public String getUsername() {  
  40.         return username;  
  41.     }  
  42.   
  43.     public void setUsername(String username) {  
  44.         this.username = username;  
  45.     }  
  46.   
  47.     public String getPass() {  
  48.         return pass;  
  49.     }  
  50.   
  51.     public void setPass(String pass) {  
  52.         this.pass = pass;  
  53.     }  
  54.   
  55.     public Connection getConnection() throws Exception {  
  56.         if (conn == null) {  
  57.             Class.forName(this.driver);  
  58.             conn = DriverManager.getConnection(url, username, this.pass);  
  59.         }  
  60.         return conn;  
  61.     }  
  62.   
  63.     public boolean insert(String sql, Object... args) throws Exception {  
  64.         PreparedStatement pstmt = getConnection().prepareStatement(sql);  
  65.         for (int i = 0; i < args.length; i++) {  
  66.             pstmt.setObject(i +1, args[1]);  
  67.         }  
  68.         if (pstmt.executeUpdate() != 1) {  
  69.             return false;  
  70.         }  
  71.         return true;  
  72.     }  
  73.   
  74.     public ResultSet query(String sql, Object... args) throws Exception {  
  75.         PreparedStatement pstmt = getConnection().prepareStatement(sql);  
  76.         for (int i = 0; i < args.length; i++) {  
  77.             pstmt.setObject(i + 1, args[1]);  
  78.         }  
  79.         return pstmt.executeQuery();  
  80.     }  
  81.   
  82.     public void modify(String sql, Object... args) throws Exception {  
  83.         PreparedStatement pstmt = getConnection().prepareStatement(sql);  
  84.         for (int i = 0; i < args.length; i++) {  
  85.             pstmt.setObject(i + 1, args[1]);  
  86.         }  
  87.         pstmt.executeUpdate();  
  88.         pstmt.close();  
  89.     }  
  90.   
  91.     public void closeConn() throws Exception {  
  92.         if (conn != null && !conn.isClosed()) {  
  93.             conn.close();  
  94.         }  
  95.     }  
  96. }  

你可能感兴趣的:(一个简单的extjs+jsp读取数据库信…)