(24)ExtJS之表格加载远程数据及其分页显示
Ext.onReady(function(){
var itemsPerPage=10;//指定分页大小
var store=Ext.create('Ext.data.Store',{
autoLoad:{start:0,limit:itemsPerPage},
fields:['id','name','age'],
pageSize:itemsPerPage,//设置分页大小
proxy:{
type:'ajax',
url:'base/018_fenye.jsp',
reader:{
type:'json',
root:'root',
totalProperty:'totalProperty'
}
}
});
//创建表格组件
Ext.create('Ext.grid.Panel',{
title:'Ext.toolbar.Paging示例',
renderTo:Ext.getBody(),
width:'400px',
height:'400px',
style:'margin-left:300px;',
store:store,
columns:[//配置表格列
{header:'id',width:30,dataIndex:'id',sortable:true},
{header:'姓名',width:80,dataIndex:'name',sortable:true},
{header:'年龄',width:80,dataIndex:'age',sortable:true}
],
bbar:[{
xtype:'pagingtoolbar',
store:store,
displayInfo:true
}]
});
/* var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id:'simpsonsStore',
autoLoad: true,
fields:['id', 'name', 'age'],
pageSize: itemsPerPage, // items per page
proxy: {
type: 'ajax',
url: '018_fenye.jsp', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'root',
totalProperty: 'totalProperty'
}
}
});
// specify the page you want to load
store.loadPage(1);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{header: 'Name', dataIndex: 'id'},
{header: 'Email', dataIndex: 'name' },
{header: 'Phone', dataIndex: 'age'}
],
width: 400,
height: 125,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
*/
});
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 'JS1.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">
<!-- extjs的样式文件 -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<!-- extjs的核心文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
<!-- 国际化文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="base/018_Grid.js"></script>
</head>
<body ></body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
String start=request.getParameter("start");
String limit=request.getParameter("limit");
System.out.println(start+limit);
try{
int index=Integer.parseInt(start);
int pageSize=Integer.parseInt(limit);
String json="{totalProperty:100,root:[";
for(int i=index;i<pageSize+index;i++){
json+="{id:'<a target=_blank href=http://www.baidu.com >"+i+"</a>',name:'name"+i+"',age:'age"+i+"'}";
if(i!=pageSize+index-1){
json+=",";
}
}
json+="]}";
System.out.println(json);
response.getWriter().write(json);
}catch(Exception e){
throw new Excepton("异常");
}
%>