第一次写文章啊，有些冲动。最近在公司学习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. POJ3187 Backward Digit Sums
			
    给出杨辉三角的顶点值,求底边各个数的值.直接DFS就好了 #include<iostream> #include<cstdio> #include<cstring> ...
    
			
    2. 
						
  2. web后端server优化
			
    1,1. 就不需要优化一个页面模板,这些都是一些非常成熟的技术,甚至没有打招呼easy了10%的性能.这10%在整个页面的运行过程中仅仅占了0.5%的比例.微乎其微,等于是前面样例中的4车道变8车道的 ...
    
			
    3. 
						
  3. Javascript多线程引擎(一)
			
    Javascript多线程引擎(一) Javascript 天生是单线程的语言, 不支持synchronized等线程操作, 但是这便不妨碍Javascript作为web语言中最具有魅力语言之一. 虽 ...
    
			
    4. 
						
  4. 打开Openstack dashboard出现Internal Server Error
			
    最近研究openstack,想把自己遇到的问题记录下来,同时如果有别的朋友也碰到同样问题的时候可以有个参考. 这次的问题是在openstack搭建好之后,dashboard本身是能用的,但是在某一天后 ...
    
			
    5. 
						
  5. 我看TDD测试驱动开发
			
    今天在实验室给大家介绍了一下TDD和Docker,大家对TDD都比较感兴趣,包括老板,也问了一些问题. 还是从头来说TDD吧,TDD作为敏捷开发领域的领头军,充满魅力,同时也充满争议.一切从三大军规说 ...
    
			
    6. 
						
  6. mysql 备份数据
			
    想在mysql库中某些数据备份下来. 1,创建一个新表,我们应需要保持表的原有属性 CREATE TABLE A LIKE B 这种方式可以把主键和索引一起copy过来. 2,把需要数据copy到新表 ...
    
			
    7. 
						
  7. Oracle琐碎笔记2
			
    备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...
    
			
    8. 
						
  8. greenlet微线程
			
    Greenlet简介 一个 “greenlet” 是一个很小的独立微线程.可以把它想像成一个堆栈帧,栈底是初始调用,而栈顶是当前greenlet的暂停位置.你使用greenlet创建一堆这样的堆 栈, ...
    
			
    9. 
						
  9. 【IOS开发】基础
			
    1.Objective-C 为 ANSI C 添加了下述语法和功能: 定义新的类 类和实例方法 方法调用(称为发消息) 属性声明(以及通过它们自动合成存取方法) 静态和动态类型化 块 (block), ...
    
			
    10. 
						
  10. codeforces #275 div2题解
			
    A题大意: 给你l,r,问你在l~r之间,是否存在 a和b互质 , b和c互质 ,但是 a,c不互质 的情况:其中l<=a<b<c<=r;如果存在,就输出a,b,c;不存在就输 ...
    
			
    11.