大家想想，上节中我们做的表格，如果有成千上万条的数据显示在表格里，然后滚动条查看数据，显然不是什么好办法，而且效率上也不允许。实际上，表格控件对性能的要求较高。在一个页面上放3个表格，就可以感觉到响应变慢。在表格里显示成千上万条数据，效率就可想而知了。
所以说分页是必不可少的，接下来我们就来看EXT提供的分页工具条。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//创建表格
var
grid =
new
Ext.grid.GridPanel({
renderTo:
'grid'
,
//渲染位置
autoHeight:
true
,
store:store,
columns:columns,
//显示列
stripeRows:
true
,
//斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:
true
,
//显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar:
new
Ext.PagingToolbar({
pageSize:10,
//每页显示几条数据
store:store,
displayInfo:
true
,
//是否显示数据信息
displayMsg:
'显示第 {0} 条到 {1} 条记录，一共 {2} 条'
,
//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg:
"没有记录"
//没有数据时显示信息
})
|
得到以下的效果，本次我把界面又换了种黑色风格，如下：
上面的数据只是我简单的在页面静态定义的，但是咱们怎么通过Java后台传递这些数据呢？
我这里用了servlet技术简单处理下：
UserServices.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
package
cn.com.shuyangyang.services;
import
java.io.IOException;
import
javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
/**
* 用户Servlet
* <a href="http://home.51cto.com/index.php?s=/space/1269642" target="_blank">@author</a> shuYangYang
* @email:shuyangyang@aliyun.com
* @website:[url]www.shuyangyang.com.cn[/url]
*/
@SuppressWarnings
(
"serial"
)
public
class
UserServices
extends
HttpServlet {
<a href=
"http://home.51cto.com/index.php?s=/space/5017954"
target=
"_blank"
>
@Override
</a>
protected
void
doGet(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException, IOException {
doPost(req,resp);
}
<a href=
"http://home.51cto.com/index.php?s=/space/5017954"
target=
"_blank"
>
@Override
</a>
protected
void
doPost(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException, IOException {
String start = req.getParameter(
"start"
);
String limit = req.getParameter(
"limit"
);
try
{
int
index = Integer.parseInt(start);
int
pageSize = Integer.parseInt(limit);
System.out.println(index);
System.out.println(pageSize);
String json =
"{total:100,root:["
;
for
(
int
i = index;i<pageSize+index;i++){
json +=
"{id:"
+i+
",name:'name"
+i+
"',descn:'desc"
+i+
"'}"
;
if
(i!=pageSize + index -
1
){
json+=
","
;
}
}
json+=
"]}"
;
resp.getWriter().write(json);
}
catch
(Exception e){
e.printStackTrace();
}
}
}
|
今晚正在装MySQL数据库，这里就不在数据库读取了，怕浪费时间，我在后台模拟对100条数据进行分页，在获得了start和limit之后生成JSON格式的数据。
获得的数据通过测试程序打印出来，如下：
{totalProperty:100,root:[
{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},
{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},
{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}
]}
请记住这个格式，不管你的后台是神马，是PHP还是C#等，只要满足了这样的格式要求，Ext就可以接受并处理，然后显示到表格中。简单看下JSON数据，totalProperty:100这里表示一共有100条数据。然后就是root:[]，root对应着一个数组，数据里有10个对象，每个对象都有id,name和descn。这10条数据最后就应该显示到表格里。
我的servlet配置如下：
|
1
2
3
4
5
6
7
8
9
|
<
servlet
>
<
servlet-name
>userService</
servlet-name
>
<
servlet-class
>cn.com.shuyangyang.services.UserServices</
servlet-class
>
</
servlet
>
<
servlet-mapping
>
<
servlet-name
>userService</
servlet-name
>
<
url-pattern
>/userServlet</
url-pattern
>
</
servlet-mapping
>
|
接下来对表格的属性做下调整：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
//定义列
var
columns = [
{header:
'编号'
,dataIndex:
'id'
,width:50},
//sortable:true 可设置是否为该列进行排序
{header:
'名称'
,dataIndex:
'name'
,width:80},
{header:
'描述'
,dataIndex:
'descn'
,width:112}
];
//转换原始数据为EXT可以显示的数据
var
store =
new
Ext.data.Store({
proxy:{
type:
'ajax'
,
url:
'/ExtJs4.2Pro/userServlet'
,
reader:{
type:
'json'
,
totalProperty:
'total'
,
root:
'root'
,
idProperty:
'id'
}
},
fields:[
{name:
'id'
},
//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:
'name'
},
{name:
'descn'
},
{name:
'status'
}
]
});
//创建表格
var
grid =
new
Ext.grid.GridPanel({
renderTo:
'grid'
,
//渲染位置
autoHeight:
true
,
store:store,
width:550,
columns:columns,
//显示列
bbar:
new
Ext.PagingToolbar({
pageSize:25,
//每页显示几条数据
store:store,
displayInfo:
true
,
//是否显示数据信息
displayMsg:
'显示第 {0} 条到 {1} 条记录，一共 {2} 条'
,
//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg:
"没有记录"
//没有数据时显示信息
})
});
//加载数据
store.load({params:{start:0,limit:25}});
|
OK，大功告成，看下效果：
在这里我发现了个问题，尽管我在前台设置了pageSize为10或者其他数值，但是最终的结果总是第一页显示你设置的条数，第二页就有问题了，暂时还不知道什么原因。知道的麻烦告诉我下。
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1332885，如需转载请自行联系原作者
