您的位置：首页 > Web前端 > JavaScript

用Extjs实现分页自动加载数据的Ajax实现

2008-09-03 10:19 585 查看

用Extjs实现分页自动加载数据的Ajax实现
2008-04-23 19:20

需要用到的外部js文件为prototype.js，和extjs官方的ext-base.js，ext-all.js，ext-lang-zh_CN.js和resources整个文件夹。所有文件都放在同一个目录下。

－－－－－－－－－－－－－－－－－－－－－－

array-grid-page.html

－－－－－－－－－－－－－－－－－－－－－－

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Array Grid Example</title>

<link rel="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="array-grid-page.js"></script>
<script type="text/javascript" src="prototype.js"></script>

</head>
<body onload="init()">

<h1>
page Grid Example
</h1>
<div id="grid3"></div>

<script type="text/javascript">

var TimeoutHandler = null;

function init()
{

if(isReady)
{
try
{
//Ajax.sendGetRequest("data.jsp",true,"callbackAjax(ME.http_request.responseText)");
var myAjax = new Ajax.Request("data.jsp",
{
method: 'get',
onComplete: callbackAjax
});
}
catch(e)
{
alert(e);
}

seturl();
}
else
{
setTimeout ("init()", 1000);
}

}

function callbackAjax(rep)
{
//responseText = req.responseText;
}

function seturl()
{
clearTimeout(TimeoutHandler);

ds.load();

TimeoutHandler = setTimeout ("seturl()", 1000);
}

</script>
</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－

array-grid-page.js

－－－－－－－－－－－－－－－－－－－－－－

var sm = null;
var cm = null;
var ds = null;
var grid = null;
var data = null;
var isReady = false;

function renderSex(value) {
if (value == '男') {
return "<span style='color:red;font-weight:bold;'>男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}

Ext.onReady(function(){

sm = new Ext.grid.CheckboxSelectionModel();
cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width: 100},
{header:'性别',dataIndex:'sex',width: 100,renderer:renderSex},
{header:'名称',dataIndex:'name',width: 140},
{header:'描述',dataIndex:'descn',width: 190}
]);
cm.defaultSortable = true;
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'data.jsp'}),
reader: new Ext.data.JsonReader({
root: 'root'
}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});

ds.load();

grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
stripeRows: true,
sm: sm,
title: 'JSP->JSON',
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),

height:500,
autoWidth: true,
width:600
//autoHeight: true,
//没有设置高度的时候一定要设置autoHeight: true，否则数据显示不出来
//autoWidth: true,
});
grid.render();
grid.getSelectionModel().selectFirstRow();
isReady = true;

})

－－－－－－－－－－－－－－－－－－－－

data.jsp

－－－－－－－－－－－－－－－－－－－－

<%@ page contentType="text/xml; charset=gbk" language="java" errorPage="" %>
<%@ page language="java" import="java.io.PrintWriter"%>
<%
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("gbk");
PrintWriter xmlout = response.getWriter();
int start = 0;
int limit = 20;
StringBuffer sb = new StringBuffer();

sb.append("{root:[");

for (int i=start;i<limit;i++)
{
sb.append("{'id':'");
sb.append(i);
sb.append("','sex':'");

if(Math.floor(Math.random() * 100)>50){
sb.append("男");
}
else
{
sb.append("女");
}
sb.append("','name':'姓名 ");
sb.append(Math.floor(Math.random() * 100));
sb.append("','descn':'描述 ");
sb.append(Math.floor(Math.random() * 100));
sb.append("'}");
if(i!=limit-1)
{
sb.append(",");
}
else
{
sb.append("]}");
}
}

String rs = sb.toString();
System.out.println(rs);

try
{
xmlout.write(rs);
}
catch (Exception e)
{
e.printStackTrace();
}
finally
{
xmlout.flush();
xmlout.close();
}
%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航