Extjs的GridPanel分页前后台完整代码实例
第一次写文章啊，有些冲动。最近在公司学习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分页前后台完整代码实例的更多相关文章
- 生成TFRecord文件完整代码实例
import os import json def get_annotation_dict(input_folder_path, word2number_dict): label_dict = {} ...
- Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- java mail实现Email的发送,完整代码
java mail实现Email的发送,完整代码 1.对应用程序配置邮件会话 首先, 导入jar <dependencies> <dependency> <groupId ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- python实现邮件发送完整代码（带附件发送方式）
实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...
- Delphi实现图像文本旋转特效完整代码
Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...
- PHP读取sphinx 搜索返回结果完整实战实例
PHP读取sphinx 搜索返回结果完整实战实例 网上搜索N久都没有一个正在读取返回sphinx结果的实例,都是到了matches那里就直接var_dump或者print_r了,没有读取到字段的例子, ...
- ajax实现的点击数目加1代码实例
ajax实现的点击数目加1代码实例:在点击按钮实现数字增加效果代码实例一章节中,介绍如何点击按钮实现数字加1的效果,但是好像并没有什么实际用处,下面就分享一段相对完整的能够在实际应用中派上用场的代码, ...
- C#读写Access数据库、表格datagridview窗体显示代码实例
C#读写Access数据库.表格datagridview窗体显示代码实例 最近项目中用到C#对于Access数据库表读写.mdb操作,学习了下相关的东西,这里先整理C#对于Access数据库的操作,对 ...
随机推荐
- 关于easyui的tab，layout，datagrid嵌套的问题
我的项目使用easyui作为前台的展示框架现在页面中是一个layout布局(分上,左,中)在左边是一些菜单,点击后,在中间部分增加一个tab显示内容而增加的tab里面是显示一些列表数据,列表上面是查询 ...
- 如何通过js给QQ好友发送信息
一般我们在做页面活动的时候可能会碰到点击一个按钮把一些相关的信息通过QQ发送给你的好友,这种信息推送的功能该如何实现呢!下面我来介绍下使用方法! 代码如下: <!DOCTYPE HTML> ...
- web开发中的多线程死锁问题，避免死锁
1.什么是死锁,产生死锁的原因,和产生死锁的必要条件 所谓死锁(DeadLock),是指多个进程或线程在运行过程中因争夺资源而造成的一种僵局,当进程或线程处于僵局时,若无外力作用,它们将无法再向前推进 ...
- A/B测试评测
A/B测试评测 A/B测试在各类网站设计中已经是比较常见的,本文着重讲讲A/B测试在应用推送领域的作用. 目前国外开通A/B测试的推送服务商只有swrve,而国内的个推也在前不久发布的smart pu ...
- MVC 在控制器中获取某个视图动态的HTML代码
ASP.NET MVC 在控制器中获取某个视图动态的HTML代码 如果我们需要动态的用AJAX从服务器端获取HTML代码,拼接字符串是一种不好的方式,所以我们将HTML代码写在cshtml文件中, ...
- Plan : 破晓
题记 : 不要因为走的太远而忘记自己为什么而出发. 1. 白书(算法竞赛入门经典)看完(每一句话都要读懂) 2. 每次听完课把当天内容复习完(自习室10点以后复习) 3. 微机实验要提前预习(把实验报 ...
- NUnit详细使用方法
http://www.ltesting.net/ceshi/open/kydycsgj/nunit/ http://nunit.org/index.php?p=download NUnit详细使用方法 ...
- JqGrid帮助文档
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- python实现变参
使用赋值表达式传递参数,可以颠倒参数列表的顺序.函数的参数提供默认参数 参数可以是变量,也可以是元祖.列表等内置的数据结构 在程序开发中,常常需要传递可变长度的参数.在函数的参数前使用标识符“*”可以 ...
- redis 中文存储乱码问题
在redis 中存储中文,读取会出现乱码(其实不是乱码,只是不是我们存的中文显示) redis> set test "我们" OK redis> get test &q ...