今天学习了 EXT 中的 Grid。主要是想要实现分页功能。先说一下分页功能实现的条件吧,数据必须要从后台动态获取(数据库,文件等等),不能使用静态数据(比如说:定义一个数组或 JSON 什么的,然后通过 MemoryProxy 取得,这样不行)。我是通过 HttpProxy 从一个 JSP 页面获取数据,显示在 Grid 中,然后实现分页功能。不过碰到一个问题:数据能得到,但 Grid 中没显示。仔细找了N遍,没觉得有什么错,就在快要放弃的时候,发现 FireBug 里的响应消息为:
{total:10, rows:[{id:0, no:'000', name:'000', age:'000'},{id:1, no:'001', name:'001', age:'001'},{id
:2, no:'002', name:'002', age:'002'}]}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
不是 JSON 。多了一句,把 JSP 里的多余的语句删了,果然能正确显示了。爽啊!
虽然能显示出数据了,但是不怎么精确。总共10个数据,每页面显示3个,应该在第四页显示一个数据,但是第四页还是3个,这样就多了两个。最后决定在 JSP 中加入几个控制语句。完整代码如下:
aabbcc.html
====================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{font-size:12px; }
</style>
<link rel="stylesheet" type="text/css" href="resource/resources/css/ext-all.css" />
<script type="text/javascript" src="resource/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="resource/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//var data={total:5,rows:[{id:1, no:"001", name:"001", age:"001"},
// {id:2, no:"002", name:"002", age:"002"},
// {id:3, no:"003", name:"003", age:"003"},
// {id:4, no:"004", name:"004", age:"004"},
// {id:5, no:"005", name:"005", age:"005"}
// ]};
//Ext.Msg.alert("message",data);
var sm = new Ext.grid.CheckboxSelectionModel();
var jsr=new Ext.data.JsonReader({
//totalProperty:"total",
root:"rows",
id:"id", type:"int"
},[
{name:"no", type:"string", mapping:"no"},
{name:"name", type:"string", mapping:"name"},
{name:"age", type:"string", mapping:"age"}
]);
var store=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"test.jsp"}),
reader:new Ext.data.JsonReader({
root:"rows",
totalProperty:"total"
},[
{name:"no"},
{name:"name"},
{name:"age"}
])
});
//store.load();
var cm=new Ext.grid.ColumnModel([
{header:"编号", dataIndex:"no"},
{header:"姓名", dataIndex:"name"},
{header:"年龄", dataIndex:"age"}
]);
var gp=new Ext.grid.GridPanel({
title:"grid",
width:350,
height:300,
frame:true,
cm:cm,
store:store,
renderTo:"grid",
bbar: new Ext.PagingToolbar({
pageSize:3,
store:store
})
});
store.load({params:{start:0, limit:3}});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
====================================================================================
test.jsp
====================================================================================
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%
int start=Integer.valueOf(request.getParameter("start"));
int limit=Integer.valueOf(request.getParameter("limit"));
System.out.print(start); System.out.print(limit);
System.out.println();
//int total=3;
int total;
if (start+limit>10) {
total=10-start;
} else {
total=limit;
}
String json="{total:10, rows:[";
for (int i=start; i<start+total; i++) {
json+="{id:"+i+", no:'00"+i+"', name:'00"+i+"', age:'00"+i+"'}";
if (i!=start+limit-1)
json+=",";
}
json+="]}";
System.out.println(json);
response.getWriter().write(json);
%>
====================================================================================