Extjs4---grid+servlet分页查询

来源：互联网发布：皮肤差怎么调理知乎编辑：程序博客网时间：2024/05/16 15:19

这个实例是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(){//创建ModelExt.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});//创建gridvar 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 {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected 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>

效果图：