第一次写文章啊，有些冲动。最近在公司学习Extjs，做了一个分页的小实例和大家分享。

1.首先编写paging-grid.js文件，这是我在网上参考的例子改写的，大同小异。

Ext.onReady(function() {

	// Proxy

	var proxy = new Ext.data.HttpProxy({

		url : "../../servlet/LoginServlet"

	});

	// Record 定义记录结果

	var Human = Ext.data.Record.create([ {

		name : "hid",

		type : "int",

		mapping : "hid"

	}, {

		name : "name",

		type : "string",

		mapping : "name"

	}, {

		name : "sex",

		type : "string",

		mapping : "sex"

	}, {

		name : "birthday",

		type : "string",

		mapping : "birthday"

	}, {

		name : "education",

		type : "string",

		mapping : "education"

	}, {

		name : "memo",

		type : "string",

		mapping : "memo"

	} ]);

	// Reader

	var reader = new Ext.data.JsonReader({

		totalProperty : "totalProperty",

		root : "root"

	}, Human);

	// Store

	var store = new Ext.data.Store({

		proxy : proxy,

		reader : reader

	});

	store.load({

		params : {

			start : 0,

			limit : 2

		}

	});

	// 列模型

	var cm = new Ext.grid.ColumnModel([ {

		header : "ID",

		width : 40,

		dataIndex : "hid"

	}, {

		header : "姓名",

		width : 80,

		dataIndex : "name",

		tooltip : "这是您的姓名"

	}, {

		header : "性别",

		width : 40,

		dataIndex : "sex",

		align : "center"

	}, {

		header : "生日",

		width : 150,

		format : "Y-m-d",

		dataIndex : "birthday"

	}, {

		header : "学历",

		width : 80,

		dataIndex : "education",

		align : "center"

	}, {

		id : "memo",

		header : "备注",

		dataIndex : "memo"

	} ]);

	var grid = new Ext.grid.GridPanel({

		title : "中国公民",

		width : 650,

		autoHeight : true,

		cm : cm,

		store : store,

		renderTo : "paging-grid",

		autoExpandColumn : "memo", // 自动伸展，占满剩余区域

		bbar : new Ext.PagingToolbar({

			store : store,

			pageSize : 2,

			displayInfo : true,

			displayMsg : "本页显示第{0}条到第{1}条的记录,一共{2}条",

			emptyMsg : "没有记录"

		})

	});

});
2.编写paging-grid.html,注意一定要引入必要的ext文件如ext-all.js等，具体看如下代码：
<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Array Grid Example</title>

    <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />

 	<script type="text/javascript" src="../../ext/ext-base.js"></script>

    <script type="text/javascript" src="../../ext/ext-all.js"></script>

    <script type="text/javascript" src="paging-grid.js"></script>

    <link rel="stylesheet" type="text/css" href="../../ext/resources/css/grid-examples.css" />

    <link rel="stylesheet" type="text/css" href="../../resources/css/examples.css" />

</head>

<body>

<script type="text/javascript" src="../../ext/examples.js"></script><!-- EXAMPLES -->

<div id="paging-grid"></div>

</body>

</html>
3.创建People.java类
<pre name="code" class="java">package com.forlink.yangm.entity;

public class People {

	private int hid;

	private String name;

	private String sex;

	private String birthday;

	private String education;

	private String memo;

	public People() {

		// TODO Auto-generated constructor stub

	}

	public People(int hid, String name, String sex, String birthday,

			String education, String memo) {

		this.hid = hid;

		this.name = name;

		this.sex = sex;

		this.birthday = birthday;

		this.education = education;

		this.memo = memo;

	}

	public int getHid() {

		return hid;

	}

	public void setHid(int hid) {

		this.hid = hid;

	}

	public String getName() {

		return name;

	}

	public void setName(String name) {

		this.name = name;

	}

	public String getSex() {

		return sex;

	}

	public void setSex(String sex) {

		this.sex = sex;

	}

	public String getBirthday() {

		return birthday;

	}

	public void setBirthday(String birthday) {

		this.birthday = birthday;

	}

	public String getEducation() {

		return education;

	}

	public void setEducation(String education) {

		this.education = education;

	}

	public String getMemo() {

		return memo;

	}

	public void setMemo(String memo) {

		this.memo = memo;

	}

}





4.创建LoginServlet，注意一定要在web.xml中配置好Servlet，相信你可以的，不用我详述了。其中要特别小心Ext对于json格式的要求，标准的格式如下：




{"totalProperty":3,"root":[{"hid":1,"name":"yangm1","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},

{"hid":2,"name":"yangm2","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},

{"hid":3,"name":"yangm3","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"}]}


如果你的数据在前台不能显示，那多半是你的json格式有问题，请好好检查。推荐一下阿里巴巴的fastjson工具包，可以帮助你进行格式转化。


package com.forlink.yangm.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.junit.Test;

import com.alibaba.fastjson.JSON;

import com.forlink.yangm.entity.People;

public class LoginServlet extends HttpServlet {

	/**

	 *

	 */

	private static final long serialVersionUID = 1L;

	@Override

	// TODO Auto-generated method stub

	protected void doGet(HttpServletRequest request,

			HttpServletResponse response) throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");

		//start：当数据序号，从0开始

		//容易和easyUI的page混淆

		int start = Integer.parseInt(request.getParameter("start"));

		//limit：页面大小

		int limit = Integer.parseInt(request.getParameter("limit"));

		System.out.println("当前页："+start+",页面大小："+limit);

		PrintWriter out = response.getWriter();

		//StringBuilder json = new StringBuilder("{totalProperty:1,root:[");

		String json = getJson(start,limit);

		out.println(json);

//		out.flush();

//		out.close();

	}

	@Test

	public String getJson(int start, int limit) {

		List<People> all = new ArrayList<People>();

		all.add(new People(1, "yangm1", "难", "1994-06-1", "high", "memo"));

		all.add(new People(2, "yangm2", "难", "1994-06-2", "high", "memo"));

		all.add(new People(3, "yangm3", "难", "1994-06-3", "high", "memo"));

		all.add(new People(4, "yangm4", "难", "1994-06-4", "high", "memo"));

		all.add(new People(5, "yangm5", "难", "1994-06-5", "high", "memo"));

		all.add(new People(6, "yangm6", "难", "1994-06-6", "high", "memo"));

		//截取当前页面大小的数据

		List<People> sublist = all.subList(start, start+limit);

		//totalProperty:一定要是你的grid需要展示的数据总量，在这里为6条

		StringBuilder json = new StringBuilder("{\"totalProperty\":");

		//root:需要展示的数据json格式，fastjson转化数据为要求的json格式

		json.append(all.size()).append(",\"root\":");

		json.append(JSON.toJSONString(sublist))	;

		json.append("}");

		System.out.println(json);

		return json.toString();

	}

	@Override

	protected void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		// TODO Auto-generated method stub

		this.doGet(request, response);

	}

}



以上所述绝壁是一个完整的例子，直接可以运行的。我个人是比较喜欢无脑的跟着大婶一步步做的，然后再探究其中奥秘，首先必须要有成就感，我才能往下继续啊，都看不到结果，你跟我说个毛啊！注释很详细，相信大家都能看懂吧。来个截图吧还是。




如果你觉得确实帮到你了，请不要吝啬你的赞，俺们需要你的鼓励啊！如果你觉得写的不错，转载是麻烦表明出处，毕竟写篇文章不容易啊客官！


												


											
Extjs的GridPanel分页前后台完整代码实例的更多相关文章
	

    
								
  1. 生成TFRecord文件完整代码实例
		
    import os import json def get_annotation_dict(input_folder_path, word2number_dict): label_dict = {}  ...
    
		
    2. 
						
  2. Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例
		
    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
    
		
    3. 
						
  3. java mail实现Email的发送,完整代码
		
    java mail实现Email的发送,完整代码 1.对应用程序配置邮件会话 首先, 导入jar <dependencies> <dependency> <groupId ...
    
		
    4. 
						
  4. jQuery弹出窗口完整代码
		
    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
    
		
    5. 
						
  5. python实现邮件发送完整代码（带附件发送方式）
		
    实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...
    
		
    6. 
						
  6. Delphi实现图像文本旋转特效完整代码
		
    Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...
    
		
    7. 
						
  7. PHP读取sphinx 搜索返回结果完整实战实例
		
    PHP读取sphinx 搜索返回结果完整实战实例 网上搜索N久都没有一个正在读取返回sphinx结果的实例,都是到了matches那里就直接var_dump或者print_r了,没有读取到字段的例子, ...
    
		
    8. 
						
  8. ajax实现的点击数目加1代码实例
		
    ajax实现的点击数目加1代码实例:在点击按钮实现数字增加效果代码实例一章节中,介绍如何点击按钮实现数字加1的效果,但是好像并没有什么实际用处,下面就分享一段相对完整的能够在实际应用中派上用场的代码, ...
    
		
    9. 
						
  9. C#读写Access数据库、表格datagridview窗体显示代码实例
		
    C#读写Access数据库.表格datagridview窗体显示代码实例 最近项目中用到C#对于Access数据库表读写.mdb操作,学习了下相关的东西,这里先整理C#对于Access数据库的操作,对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. css3标签学习总结文章
			
    1. :nth-child和 :nth-of-type 区别 比如: p:nth-child(2) 满足条件:1.必须是p标签:2.必须是父元素的第2个子元素:P:nth-of-type(2) 满足条 ...
    
			
    2. 
						
  2. SQL Server 2008 允许远程链接,适用于广域网和局域网
			
    用户在使用SQL Server 2008远程链接时,可能会弹出如下对话框: 在链接SQL服务器时发生网络链接错误或特定实例错误.SQL服务器不存在或者链接不成功.请验证用户名是否正确或SQL服务器是否 ...
    
			
    3. 
						
  3. Redis简介与简单安装
			
    Redis简介与简单安装   一.NoSQL的风生水起 1.1 后Web2.0时代的发展要求 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类 ...
    
			
    4. 
						
  4. C#编程总结
			
    C#编程总结--总目录 多年的C#实战经历,希望通过一个系列课程对C#编程做系统总结. 总结过去,展望未来.新的一年,新的征程,新的开始! 希望我们在2014梦想成真,马到成功! 1.C#编程总结(一 ...
    
			
    5. 
						
  5. linux extract rar files
			
    Extract rar-archives If you need to extract rar files in Linux, you have to download and install unr ...
    
			
    6. 
						
  6. .net通用底层搭建
			
    .net通用底层搭建 之前写过几篇,有朋友说看不懂,有朋友说写的有点乱,自己看了下,的确是需要很认真的看才能看懂整套思路. 于是写下了这篇. 1.这个底层,使用的是ado.net,微软企业库 2.实体 ...
    
			
    7. 
						
  7. Asp.Net Web API 导航3
			
    Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...
    
			
    8. 
						
  8. PHP 5.5以后加速插件：Zend Opcache
			
    大家知道目前PHP的缓存插件一般有三个: APC. eAccelerator. XCache,但未来它们可能都会消失,因为PHP 5.5已经集成 Zend Opcache,功能和前三者相似但又有少许不 ...
    
			
    9. 
						
  9. C#奇葩关键字
			
    C#奇葩关键字——忐忑 那就认识认识吧,可是又太多,所以也只能是想到哪里是哪里,我们这就让思绪自由飞翔一会吧! 1.@ 这个东东看似和邮件有关啊,但是在C#的世界里,可跟邮件没有一毛钱关系,它是str ...
    
			
    10. 
						
  10. JS简单验证密码强度
			
    <input type="password" id="password" value=""/><button id=&qu ...
    
			
    11.