ext2.0.2+jsp分页简单实现

最新推荐文章于 2024-05-17 16:15:51 发布

fly1949

最新推荐文章于 2024-05-17 16:15:51 发布

阅读量452

点赞数

分类专栏： ext2.0.2学习笔记文章标签： jsp ext json stylesheet string exception

ext2.0.2学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当访问1.html时，会执行extcs.js中的代码，用ajax技术请求1.jsp中的信息，取得数据后分页显示。1.jsp中数据必须是json数据，以便于取回到extcs.js文件后处理显示。

1.jsp源码
 <%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%
	String start=request.getParameter("start");
	String limit=request.getParameter("limit");
	
	try{
		int index=Integer.parseInt(start);
		int pageSize=Integer.parseInt(limit);
		String json="{total:100,root:[";
		for(int i=index;i<pageSize+index;i++){
			json+="{id:"+i+",name:'name"+i+"',color:'color"+i+"'}";
			if(i!=pageSize+index-1){
				json+=",";
			}
		}
		json+="]}";
		out.write(json);
		}catch(Exception e){
			
		}
	
%>

1.html源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extcs.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

extcs.js源码

var sm=new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
var store=new Ext.data.Store(
{proxy:new Ext.data.HttpProxy({url:'1.jsp'}),
reader:new Ext.data.JsonReader(
{totalProperty:'total',root:'root'},
[{name:'id'},{name:'name'},{name:'color'}]
)})
var grid=new Ext.grid.GridPanel(
{renderTo:'grid',
store:store,
autoHeight:true,
cm:cm,
sm:sm,
enableColumnMove:true,
enableColumnResize:true,
 loadMask:true, 
bbar:new Ext.PagingToolbar(
{ pageSize:10, 
store:store, 
displayInfo:true, 
displayMsg:'显示{0}条到{1}条记录,一共{2}条',
 emptyMsg:'没有记录' 
}), 
viewConfig:{ forceFit:true } })
store.load({params:{start:0,limit:10}});

效果显示

fly1949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext2.0.2+jsp分页简单实现

当访问1.html时，会执行extcs.js中的代码，用ajax技术请求1.jsp中的信息，取得数据后分页显示。1.jsp中数据必须是json数据，以便于取回到extcs.js文件后处理显示。1.jsp源码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><
复制链接

扫一扫