Extjs4---grid+servlet分页查询

最新推荐文章于 2012-09-28 10:34:33 发布

小姐你喜不喜欢吃青椒

最新推荐文章于 2012-09-28 10:34:33 发布

阅读量5.2k

点赞数

分类专栏： extjs4 文章标签： extjs servlet json stylesheet string autoload

本文链接：https://blog.csdn.net/lc448986375/article/details/7967860

版权

extjs4 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

这个实例是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>

效果图：

小姐你喜不喜欢吃青椒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Extjs4---grid+servlet分页查询

这个实例是extjs4 grid+servlet的分页查询，忙了一下午总算弄出来了，和大家交流分享一下，我也是这几天在自学的Extjs4，可能有些地方写的不太对，有错误希望大家指出来html页面代码; Grid分页查询示例 pageOfgrid.js代码：//预加载Ext.require( [ 'Ext.g
复制链接

扫一扫