这个实例是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>
效果图：
