87,914
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
</head>
<body>
<h1>Paging Grid Example</h1>
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
remote data (from the Ext forums).</p>
<p>Note that the jsis not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>
<div id="topic-grid"></div>
<button id="btn">Get Other Value</button>
</body>
</html>
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'total',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
],
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/paging.jsp'
})
});
var pagingBar = new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:500,
height:300,
title:'ExtJS Paging Test',
store: store,
columns:[
{header:"ID",dataIndex:"id"},
{header:"Name",dataIndex:"name"},
{header:"EMail",dataIndex:"email"}
],
bbar: pagingBar
});
grid.render();
store.load({params:{start:0, limit:3}});
document.getElementById('btn').onclick = function(){
alert(store.reader.jsonData.somefield);
};
});
<%
request.setCharacterEncoding("utf-8");
String _start = request.getParameter("start");
String _limit = request.getParameter("limit");
int start = Integer.parseInt(_start);
int limit = Integer.parseInt(_limit);
//返回的json字符串
String responseString = "{total:50,somefield: 'xxxx', data:[";
for(int i=0; i<limit; i++){
responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
if(i!=limit-1){
responseString+= ",";
}
}
responseString+="]}";
System.out.println(responseString);
//{total:50,otherfield: 'xxx',data:[{id: 'id00',name:'name00',email:'email00'},{id: 'id10',name:'name10',email:'email10'},{id: 'id20',name:'name20',email:'email20'}]}
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(responseString);
response.flushBuffer();
response.getWriter().close();
%>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script>
Ext.onReady(function(){
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'test1.asp'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'result'
},[{name:'xx'}]),
listeners:{load:function(st){
alert(st.reader.jsonData.myatt)
}}
});
store.load();
});
</script>
{
total:1,
result:[{xx:'xx'}],
myatt:'abcd'
}