初始EXT分页

Narcissu

浏览: 983 次
性别:
来自: 辽宁

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1)

社区版块

存档分类

2009-07 ( 1)
更多存档...

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属性内容无法显示的问题，希望多多指教

0
顶

0
踩

分享到：

2009-07-13 21:11
浏览 983
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论