ExtJs4分页小例子
今天做了个ExtJS4分页的小例子
直接上代码
这是index.jsp
这是testPage.js
最后一个是后台查询数据库生成json
是不是觉得很简单很方便
直接上代码
这是index.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html; charset=utf-8"%>
<%
//response.setContentType("text/html; charset=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">
<script type="text/javascript" src="ext/ext-all.js"></script>
<!--<script type="text/javascript" src="js/testExtJs.js"></script>
-->
<script type="text/javascript" src="js/testPage.js"></script>
<link rel="stylesheet" href="ext/ext-all.css" type="text/css"></link></head>
<style>
body {
margin: 0 auto;
text-align: center;
padding: 0 auto;
}
#tb {
border: #000;
font-size: 12px;
text-align: center;
width: 1090px;
}
#tb tr {
margin-top: 2px;
padding-top: 4px;
}
#tb td {
overflow: hidden;
}
.kuai{
background:#ccddee;
vertical-align:center;
text-align:center;
width:180px;
height:25px;
font-size:12px;
color:#333333;
border: 1px solid #fff;
}
select{
width:200px;
background:#f5f5f5;
font-size:12px;
color:#333333;
}
#gridview{
margin-top:5px;
}
</style>
<body>
<div id="mainc">
<div id="formquery"></div>
<div id="gridview"></div>
</div>
</body>
</html>
这是testPage.js
Ext.onReady(function() {
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id : 'simpsonsStore',
autoLoad : false,
fields : [ 'name', 'email', 'phone' ],
pageSize : itemsPerPage, // items per page
proxy : {
type : 'ajax',
url : 'query2.jsp', // url that will load data with respect to
// start and limit params
reader : {
type : 'json',
root : 'items',
totalProperty : 'total'
}
}
});
// specify segment of data you want to load using params
store.load( {
params : {
start : 0,
limit : itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : store,
columns : [ {
header : 'Name',
dataIndex : 'name'
}, {
header : 'Email',
dataIndex : 'email',
flex : 1
}, {
header : 'Phone',
dataIndex : 'phone'
} ],
width : 400,
height : 200,
dockedItems : [ {
xtype : 'pagingtoolbar',
store : store,
dock : 'bottom',
displayInfo : true
} ],
renderTo : Ext.getBody()
});
});
最后一个是后台查询数据库生成json
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String names[]={"aaa","bbb","ccc","ddd"};//从后台查出来的结果集
String email[]={"aaaa","bbbb","cccc","dddd"};
String phone[]={"aaaaa","bbbbb","ccccc","ddddd"};
int start=Integer.parseInt(request.getParameter("start"));
int limit=Integer.parseInt(request.getParameter("limit"));
int count=4;//总条数
String json="{'total':'4','items':[";
for(int i = start; i < limit+start&&i<count; i++){
json+="{'name':'"+names[i]+"','email':'"+email[i]+"','phone':'"+phone[i]+"'},";
}
json+="]}";
json = json.replace(",]}", "]}");
out.write(json);
%>
是不是觉得很简单很方便