ExtJS4 grid动态生成表格分页 加入行号
最近闲来无事就看了一下ExtJS的grid表格，相对来说ExtJS个grid做的是非常成功的，很受欢迎，功能很强大。由于本人能力有限，只是闲来无事看看，并未深入研究，下面简单介绍一些基本功能。
参数值start和limit是ExtJS中grid分页请求的默认参数，如果想修改参数值，请参照API，在此不作详细说明了。获取到分页数据的起始值和每页数据容量之后，就可以从数据库中取数据了 total是数据总量，取出来的数据放在userList中，然后转向gridDatas.jsp做数据的展示。userList里面放的是User对象，User对象定义如下：
1. 首先先写页面，页面很简单，没写什么东西，只作为一个容器，具体js代码放在grid.js中，grid.html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext-grid分页显示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
</head>
<body>
<div id="topic-grid"></div>
</body>
</html>
说明：导入ext-all.css和ext-all-debug.js文件就可以了，grid.js是页面具体的js代码。
2. 最关键的部分就是grid.js的代码编写了，因为它最终要生成最后的表格，grid.js代码如下：
Ext.onReady(function(){
Ext.define('csdnModel', {
extend: 'Ext.data.Model',
fields: [
{name:'id',type:'int'},
{name:'username',type:'string'},
{name:'password',type:'string'},
{name:'email',type:'email'}
],
idProperty: 'threadid'
});
var store = Ext.create('Ext.data.Store', {
storeId:'csdnStore',
model:'csdnModel',
pageSize:50,
proxy: {
type: 'ajax',
url: 'csdnServlet',
reader: {
type:'json',
root: 'users',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
});
Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
return (store.currentPage - 1) * store.pageSize + rowIndex + 1;
}
});
Ext.create('Ext.grid.Panel', {
title: 'CSDN泄漏用户账户信息',
titleAlgin:'center',
columnLines:true,
store: Ext.data.StoreManager.lookup('csdnStore'),
columns: [
Ext.create('Ext.grid.PageRowNumberer',{
header:'序号',
width:'80'
}),
{header:'ID',dataIndex:'id',hidden:true},
{ header: '用户名', dataIndex: 'username',sortable:true,width:150},
{ header: '密码', dataIndex: 'password', flex: 1,width:150},
{ header: '注册邮箱', dataIndex: 'email',sortable:true,width:300}
],
tbar:[
'-', {
text: '添加',
enableToggle: true,
toggleHandler: function(btn, pressed) {
Ext.Msg.alert('友情提示','未添加此功能！');
}
},'-',{
text: '删除',
enableToggle: true,
toggleHandler: function(btn, pressed) {
Ext.Msg.alert('友情提示','未添加此功能！');
}
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: Ext.data.StoreManager.lookup('csdnStore'),
displayInfo: true,
displayMsg: '正在展示CSDN泄漏用户信息 第 {0} - {1}条 共 {2} 条数据',
emptyMsg: "没有任何数据",
beforePageText:"第",
afterPageText:"/ {0}页",
firstText:"首页",
prevText:"上一页",
nextText:"下一页",
lastText:"尾页",
refreshText:"刷新",
items:[
'-', {
text: '添加',
enableToggle: true,
toggleHandler: function(btn, pressed) {
Ext.Msg.alert('友情提示','未添加此功能！');
}
},'-',{
text: '删除',
enableToggle: true,
toggleHandler: function(btn, pressed) {
Ext.Msg.alert('友情提示','未添加此功能！');
}
}]
}),
height: 570,
width: 700,
renderTo: Ext.getBody()
});
store.loadPage(1);
});
说明： (1) 首先定义了一个csdnModel继承自Ext.data.Model 它指明了后台返回的json对象有那些属性，也就是说j返回的json对象有id，username，password，email这4个属性，这决定了后台返回json对象的格式。(2) 其次定义了一个store，store非常重要，它就是数据的来源，grid最终的数据都是由store提供。在store中指明数据的格式，就是刚才定义的csdnModel，pageSize指明每页显示的数据量，我这里配置了50，每页显示50条数据。然后配置代理选项，代理项中需要指明数据来源的url，以及读取数据的方式ajax，reader是真正读取数据的东西，指明返回的是json格式的数据，root是指json对象组成的数组由“users”开始*，totalProperty指明返回数据的同时返回的数据总量的属性是什么（可以看第4步后台返回数据的格式，便于理解）。(3)接下来就要创建真正的gridPanel了 相关配置项可以参考API，在此主要说一下添加行号，分页行号是连续的。在Columns的配置项中添加了 'Ext.grid.PageRowNumberer'对象，这个类并不是EXTJS自有的 ，而是自己定义的，定义在gridPanel前面。它继承自 Ext.grid.RowNumberer，在定义的时候重写renderer，这是一个函数表格数据在渲染前会调用这个函数，然后该列就会显示函数返回的值，函数中通过计算得到该行的真实行号。行号连续效果如下：
3. 后台数据返回。到此为止前台已经准备就绪了，剩下的就是后台代码的编写了，第2步中的store中已经指明了请求数据的URL，csdnServlet！csdnServet的主要代码如下：
int start = Integer.parseInt(request.getParameter("start"));
int limit = Integer.parseInt(request.getParameter("limit"));
int total = userDAO.getTotalOfUsers();
List userList = userDAO.getAllUser(start, limit);
request.setAttribute("total", total);
request.setAttribute("userList", userList);
request.getRequestDispatcher("/gridDatas.jsp").forward(request, response);
参数值start和limit是ExtJS中grid分页请求的默认参数，如果想修改参数值，请参照API，在此不作详细说明了。获取到分页数据的起始值和每页数据容量之后，就可以从数据库中取数据了 total是数据总量，取出来的数据放在userList中，然后转向gridDatas.jsp做数据的展示。userList里面放的是User对象，User对象定义如下：
public class User {
private int id;
private String username;
private String password;
private String email;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
4. 数据返回。这是最后一步了。第2步已经定义好了数据的返回格式，所以在gridDatas.jsp中要按照第2步定义的格式返回数据，代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
{
'totalCount':${total },
'users':[
<c:forEach items="${userList }" var="user">
{'id':${user.id},'username':'${user.username }','password':'${user.password }','email':'${user.email }'},
</c:forEach>
]
}
第2步中定义store的时候 指明
totalProperty的值为
‘totalCount’，所以后台必须用totalCount指明数据的总量，同样第2步中store的
root选项指明根元素为
'users'，所以返回的json对象的跟元素必须为users 。json对象中的属性是第1步中定义的
csdnModel中的字段值。前台定义好之后，后台的数据返回相对简单。
到此为止，所有的步骤都完成了，徒说无用，给大家看看效果：
请求数据：
数据返回展示：
添加删除等：
