也許分頁的實現對像我這樣的初學者來說比較有難度，其實如果你認真去研究他的原理，感覺並沒想像中的那麼難。剛開始我想用DWR框架來實現客戶端到服務器的數據交換，個人覺得其實現過程過於繁瑣，不適合初學者學習。如果有興趣的可以在網上找相應資源。下面我藉助struts2.1和hibernate3.0來實現ext的表格分頁。
項目是以列出數據庫中學生信息進行分頁爲實例。
以下數據庫（oracle11g）的建表語句：
create table student(
id number, --主鍵
code varchar2(50), --學號
name varchar2(50),
sex varchar2(10),
age number(10),
political varchar2(50),--政治面貌
origin varchar2(50), --籍貫
professional varchar(50)
)
alter table student
add constraint pk_student primary key(id);
create sequence seq_sId
increment by 1
start with 1
maxvalue 999999999;
insert into student values(seq_sid.nextval,'200841903205','劉曉春','男','22','中共黨員','湖南長沙','長沙');
insert into student values(seq_sid.nextval,'200841903206','景','女','20','共青團員','河南','商丘');
insert into student values(seq_sid.nextval,'200841903207','婧','女','22','中共黨員','湖南長沙','邵陽');前臺代碼：
Index.jsp頁面，ext導入的基礎包
<%@page import="java.math.BigDecimal"%>
<%@page import="com.student.service.StudentSerivce"%>
<%@ 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//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="moxu">
<link type="text/css" rel="stylesheet"
href="ext/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- 這是引入一個自定義的js頁面，關鍵實現代碼所在 -->
<script type="text/javascript" src="index.js"></script>
<!-- Date: 2011-11-19 -->
</head>
<body>
<%
StudentSerivce ss = new StudentSerivce();
request.setAttribute("student" ,ss.findById(new BigDecimal(1)));
%>
<script type="text/javascript">
function get(){
var a = '${student.name}';
alert(a);
}
</script>
<div id="head" style="font-weight: bold; font-size: 200%">
學生管理系統
</div>
<div id="foot" style="text-align: center;">
</div>
</body>
</html>下面是index.js代碼，實現分頁非常重要的核心部分，注意此頁面必須導入index.jsp
/**
* @author moxu
*/
Ext.onReady(function() {
var recordType = Ext.data.Record.create([ //表格的記錄集格式
{name: "id",mapping:"id", type: "int"},
{name: "code", mapping:"code",type: "string"},
{name: "name", mapping:"name", type: "string"},
{name: "sex", mapping:"sex", type: "string"},
{name: "age", mapping:"age", type: "string"},
{name: "political", mapping:"political", type: "string"},
{name: "origin", mapping:"origin", type: "string"},
{name: "professional", mapping:"professional", type: "string"}
]);
var store1 = new Ext.data.Store({
//採用HttpProxy代理
proxy : new Ext.data.HttpProxy({
url:'student.action' //action的名字，通過action來獲取數據
}),
reader : new Ext.data.JsonReader({ //對數據進行解析,數據必須爲json格式
totalProperty: 'tatalProperty', //總共有多少條記錄
root : 'root' //數據
},recordType),
remoteSort: true
});
var columns = new Ext.grid.ColumnModel([
{header:'學號',dataIndex:'code'},
{header:'姓名',dataIndex:'name'},
{header:'性別',dataIndex:'sex'},
{header:'年齡',dataIndex:'age'},
{header:'政治面貌',dataIndex:'political'},
{header:'籍貫',dataIndex:'origin'},
{header:'所屬系',dataIndex:'professional'}
]);
var grid = new Ext.grid.GridPanel({
title:'學生信息列表',
region:"center",
cm:columns,
store:store1,
bbar:new Ext.PagingToolbar({
pageSize:7,
store:store1,
displayInfo:true,
displayMsg:'顯示第{0}條到{1}條記錄，一共{2}條'
})
});
store1.load({ //注意帶後面的參數
params:{
start:0,
limit:6
}
});
var vp = new Ext.Viewport({
layout : 'border',
items:[
{
region:'north',
contentEl:'head'
},
grid,
{
region:'south',
contentEl:'foot'
},
{
region:'east',
contentEl:'button'
}]
});
});Serivce層StudentSerivce.java關鍵方法：（注意json字符串必須是如下格式{tatalProperty:100,root:[{"id":1,"sex":"男","political":"中共黨員","age":22,"name":"劉曉春","origin":"湖南長沙","code":"200841903205","professional":"長沙"},{"id":2,"sex":"女","political":"共青團員","age":20,"name":"景","origin":"河南商丘","code":"200841903206","professional":"商丘"},{"id":3,"sex":"女","political":"中共黨員","age":22,"name":"尹","origin":"湖南長沙","code":"200841903207","professional":"唐市"}]}
）
public String getList(int start,int limit){
Session session = HibernateSessionFactory.getSession();
Transaction tran = session.beginTransaction();
Query q = session.createQuery("from Student");
q.setFirstResult(start);
q.setMaxResults(limit);
ArrayList<Student> al = (ArrayList<Student>) q.list();
tran.commit();
session.close();
return "{tatalProperty:100,root:"+JSONArray.fromObject(al)+"}";
}
Action層關鍵代碼實現：
package com.student.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.student.service.StudentSerivce;
public class StudentAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private HttpServletResponse response;
private HttpServletRequest request;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
private int start;
private int limit;
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
response = ServletActionContext.getResponse();
response.setContentType("application/xml;charset=UTF-8");
System.out.println("start"+start+"limit"+limit);
response.getWriter().print(new StudentSerivce().getList(start,limit));
return null;
}[img][/img][img][/img]