這個實例是extjs4 grid+servlet的分頁查詢，忙了一下午總算弄出來了，和大家交流分享一下，我也是這幾天在自學的Extjs4，可能有些地方寫的不太對，有錯誤希望大家指出來
html頁面代碼;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid分頁查詢示例</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/ext-all.js"></script>
<script type="text/javascript" src="js/pageOfgrid.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
pageOfgrid.js代碼：
//預加載
Ext.require(
[
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.data.*'
]
);
Ext.onReady(
function(){
//創建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'}
]
}
)
//創建數據源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//設置分頁大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'users',
reader: {
//數據格式為json
type: 'json',
root: 'bugs',
//獲取數據總數
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//創建grid
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性別',width:120,dataIndex:'sex',sortable:true},
{text:'年齡',width:120,dataIndex:'age',sortable:true}
],
height:200,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid分頁查詢示例示例',
renderTo: 'grid',
//分頁功能
bbar:Ext.create('Ext.PagingToolbar',{
store:store,
displayInfo:true,
displayMsg:'顯示{0}-{1}條，共計{2}條',
emptyMsg:"沒有數據"
}
)
}
)
store.loadPage(1);
}
)
Servlet后臺代碼：
package servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*
* @author 劉暢
*/
public class Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String start = req.getParameter("start");
String limit = req.getParameter("limit");
StringBuilder sb = null;
//數據總數
int total = 0;
try {
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/user", "root", "123456");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
//查詢數據總數語句
String countSql = "select count(*) from users";
try {
pstmt = con.prepareStatement(countSql);
rs = pstmt.executeQuery();
while(rs.next()){
total = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
//分頁查詢語句
String sql = "select * from users limit " + start + ", " + limit;
try {
pstmt = con.prepareStatement(sql);
rs = pstmt.executeQuery();
sb = new StringBuilder();
//設置json數據格式
sb.append("{totalCount:"+total+",bugs:[");
while (rs.next()) {
sb.append("{");
sb.append("name:" + "\'" + rs.getString(1) + "\',");
sb.append("sex:" + "\'" + rs.getString(2) + "\',");
sb.append("age:" + "\'" + rs.getString(3) + "\'");
sb.append("},");
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
String json = sb.substring(0, sb.length() - 1);
json += "]}";
System.out.println(json);
resp.setContentType("text/html");
resp.setCharacterEncoding("UTF-8");
try {
resp.getWriter().write(json);
resp.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
web.xml源碼：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>getUsers</servlet-name>
<servlet-class>servlet.Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getUsers</servlet-name>
<url-pattern>/users</url-pattern>
</servlet-mapping>
</web-app>
效果圖：
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
