初始EXT分页

最新推荐文章于 2024-09-14 17:34:00 发布

whatisdoneisdone

最新推荐文章于 2024-09-14 17:34:00 发布

阅读量159

点赞数

文章标签： EXT json JSP HTML

本人第一篇博客，没什么太多想说的，自己学习EXT有一段时间了，由于本人比较笨，历尽千辛万苦，终于做出来了EXT采用JSON对象的分页查询，拿出来与各位EXT初学者分享一下，最简单的分页了，见笑见笑：
JSP页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

</head>

<body>
<script type="text/javascript" src = 'json.js'></script>
<div align='center' id='panel1'></div>
</body>
</html>
JS文件：
Ext.onReady(function(){

Ext.QuickTips.init();

var record = new Ext.data.Record.create([{
name: 'id'
}, {
name: 'name'
}, {
name: 'tele'
}]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'/JSONTest/data.do'
}),
reader: new Ext.data.JsonReader({
totalProperty:'total',
root: 'infor',
id: 'id'
}, record),

storeInfo: {
field: 'id',
direction: 'asc'
}
});

var grid = new Ext.grid.GridPanel({
store: store,
ddGroup: 'treeDD',
border: false,

enableDrag: true,

columns: [{
id: 'id',
header: '用户ID',
autoWidth: true,
width: 80,
dataIndex: 'id',
sortable: true
}, {
header: '用户姓名',
width: 80,
dataIndex: 'name',
sortable: true
}, {
header: '联系电话',
width: 80,
dataIndex: 'tele',
sortable: true
}],
stripeRows: true,
autoExpandColumn: 1
});
store.load({
params:{
start:0,
limit:4
}
});

var pagingToolbar = new Ext.PagingToolbar({
pageSize:4,
store:store,
displayInfo:true
});

var dataPanel = new Ext.Panel({
style: 'padding:0px 0px 5px 0px',
region: 'center',
title: '联系方式',
layout: 'fit',
autoScroll: true,
closable: true,
tbar:pagingToolbar,
items: grid
});

var panel = new Ext.form.FormPanel({
layout: 'border',
width: 800,
height: 400,
applyTo: 'panel1',
items: [dataPanel]
});

});
后台代码：
public class DataAction extends Action {

Infor infor;
InforDAO id = new InforDAO();
String ID = "id";
String NAME = "name";
String TELE = "tele";
String INFOR = "infor";
String TOTAL = "total";

public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
// TODO Auto-generated method stub
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
int start = Integer.parseInt(request.getParameter("start"));
int limit = Integer.parseInt(request.getParameter("limit"));

System.out.println("start is "+start);
System.out.println("limit is "+limit);
int num = id.findAll().size();
JSONObject json = new JSONObject();
List<Infor> list = new ArrayList();
List inf = new ArrayList();
Map map = new HashMap();

list = id.paging(start, limit);
Iterator <Infor> ite = list.iterator();
while(ite.hasNext())
{
Map map1 = new HashMap();
infor = ite.next();
map1.put(ID,infor.getId());
map1.put(NAME, infor.getName());
map1.put(TELE, infor.getTele());
inf.add(map1);

}
map.put(INFOR, inf);
map.put(TOTAL, num);
json = json.fromObject(map);
System.out.println(json.toString());
out.print(json);
return null;
}
}
不过，我总是会遇到问题，比如说GridPanel中 Columns属性中的header属性内容无法显示的问题，希望多多指教