第一次寫文章啊，有些衝動。最近在公司學習Extjs，做了一個分頁的小實例和大家分享。
1.首先編寫paging-grid.js文件，這是我在網上參考的例子改寫的，大同小異。
Ext.onReady(function() {
// Proxy
var proxy = new Ext.data.HttpProxy({
url : "../../servlet/LoginServlet"
});
// Record 定義記錄結果
var Human = Ext.data.Record.create([ {
name : "hid",
type : "int",
mapping : "hid"
}, {
name : "name",
type : "string",
mapping : "name"
}, {
name : "sex",
type : "string",
mapping : "sex"
}, {
name : "birthday",
type : "string",
mapping : "birthday"
}, {
name : "education",
type : "string",
mapping : "education"
}, {
name : "memo",
type : "string",
mapping : "memo"
} ]);
// Reader
var reader = new Ext.data.JsonReader({
totalProperty : "totalProperty",
root : "root"
}, Human);
// Store
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load({
params : {
start : 0,
limit : 2
}
});
// 列模型
var cm = new Ext.grid.ColumnModel([ {
header : "ID",
width : 40,
dataIndex : "hid"
}, {
header : "姓名",
width : 80,
dataIndex : "name",
tooltip : "這是您的姓名"
}, {
header : "性別",
width : 40,
dataIndex : "sex",
align : "center"
}, {
header : "生日",
width : 150,
format : "Y-m-d",
dataIndex : "birthday"
}, {
header : "學歷",
width : 80,
dataIndex : "education",
align : "center"
}, {
id : "memo",
header : "備註",
dataIndex : "memo"
} ]);
var grid = new Ext.grid.GridPanel({
title : "中國公民",
width : 650,
autoHeight : true,
cm : cm,
store : store,
renderTo : "paging-grid",
autoExpandColumn : "memo", // 自動伸展，佔滿剩餘區域
bbar : new Ext.PagingToolbar({
store : store,
pageSize : 2,
displayInfo : true,
displayMsg : "本頁顯示第{0}條到第{1}條的記錄,一共{2}條",
emptyMsg : "沒有記錄"
})
});
});2.編寫paging-grid.html,注意一定要引入必要的ext文件如ext-all.js等，具體看如下代碼：<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<script type="text/javascript" src="paging-grid.js"></script>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/examples.css" />
</head>
<body>
<script type="text/javascript" src="../../ext/examples.js"></script><!-- EXAMPLES -->
<div id="paging-grid"></div>
</body>
</html>3.創建People.java類<pre name="code" class="java">package com.forlink.yangm.entity;
public class People {
private int hid;
private String name;
private String sex;
private String birthday;
private String education;
private String memo;
public People() {
// TODO Auto-generated constructor stub
}
public People(int hid, String name, String sex, String birthday,
String education, String memo) {
this.hid = hid;
this.name = name;
this.sex = sex;
this.birthday = birthday;
this.education = education;
this.memo = memo;
}
public int getHid() {
return hid;
}
public void setHid(int hid) {
this.hid = hid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEducation() {
return education;
}
public void setEducation(String education) {
this.education = education;
}
public String getMemo() {
return memo;
}
public void setMemo(String memo) {
this.memo = memo;
}
}
4.創建LoginServlet，注意一定要在web.xml中配置好Servlet，相信你可以的，不用我詳述了。其中要特別小心Ext對於json格式的要求，標準的格式如下：
{"totalProperty":3,"root":[{"hid":1,"name":"yangm1","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},
{"hid":2,"name":"yangm2","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},
{"hid":3,"name":"yangm3","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"}]}package com.forlink.yangm.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.junit.Test;
import com.alibaba.fastjson.JSON;
import com.forlink.yangm.entity.People;
public class LoginServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
// TODO Auto-generated method stub
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//start：當數據序號，從0開始
//容易和easyUI的page混淆
int start = Integer.parseInt(request.getParameter("start"));
//limit：頁面大小
int limit = Integer.parseInt(request.getParameter("limit"));
System.out.println("當前頁："+start+",頁面大小："+limit);
PrintWriter out = response.getWriter();
//StringBuilder json = new StringBuilder("{totalProperty:1,root:[");
String json = getJson(start,limit);
out.println(json);
// out.flush();
// out.close();
}
@Test
public String getJson(int start, int limit) {
List<People> all = new ArrayList<People>();
all.add(new People(1, "yangm1", "難", "1994-06-1", "high", "memo"));
all.add(new People(2, "yangm2", "難", "1994-06-2", "high", "memo"));
all.add(new People(3, "yangm3", "難", "1994-06-3", "high", "memo"));
all.add(new People(4, "yangm4", "難", "1994-06-4", "high", "memo"));
all.add(new People(5, "yangm5", "難", "1994-06-5", "high", "memo"));
all.add(new People(6, "yangm6", "難", "1994-06-6", "high", "memo"));
//截取當前頁面大小的數據
List<People> sublist = all.subList(start, start+limit);
//totalProperty:一定要是你的grid需要展示的數據總量，在這裏爲6條
StringBuilder json = new StringBuilder("{\"totalProperty\":");
//root:需要展示的數據json格式，fastjson轉化數據爲要求的json格式
json.append(all.size()).append(",\"root\":");
json.append(JSON.toJSONString(sublist)) ;
json.append("}");
System.out.println(json);
return json.toString();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
this.doGet(request, response);
}
}
如果你覺得確實幫到你了，請不要吝嗇你的贊，俺們需要你的鼓勵啊！如果你覺得寫的不錯，轉載是麻煩表明出處，畢竟寫篇文章不容易啊客官！