[Ext JS 4] Grid 實戰之分頁功能
前言
分頁功能的實現有兩種途徑：
一種是服務端分頁方式， 也就是web客戶端傳遞頁碼引數給服務端，服務端根據頁面引數返回指定條數的資料。也就是要多少取多少。這種方式比較適合Grid 的資料量很大，需分批取。
另一種是客戶端分頁方式， 一次性從服務端取回所有的資料在客戶端這邊實現分頁。這種自然適合資料量較少的狀況，減少和服務端的互動， 對效能有一些幫助。這種方式還有一種好處就是對於初學Ext JS Grid 或分頁功能比較簡單和直觀了。
Ext 目前的官方文件中，對於客戶端分頁的方式介紹和例項不多，而服務端的方式，跟具體的服務端的技術相關，Ext 也就沒做太多的介紹了。
本篇先介紹分頁實現的思想，然後從客戶端的實現方式介紹開始，畢竟測試起來簡單一些；最後介紹服務端的方式。
分頁的效果：
Grid Panel 分頁實現思想
要在Grid上實現分頁功能，
首先要給這個Grid Panel 新增一個 Ext.PagingToolbar
新增的方式可以使用 bbar 的config 新增到button bar
也可以使用dockedItems 的 config 新增
類似：
bbar: Ext.create('Ext.PagingToolbar',{ store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", } ),
或是：
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]使用Ext.create 或是直接在 [] config 都可以。
接下來就是這個store 的處理了。page 的store和一般的store 會有一些差別的地方，下面會介紹到。
客戶端分頁方式(local data)
Ext JS 中將客戶端的分頁也叫“local data‘ 的分頁。
在Ext JS 的官方文件中有提到關於PageingStore這樣一篇介紹
這種方式通過新增一些新的Class 的方式實現。而且這個擴充套件包是針對Ext js 3.x 來實現的， 需要下載擴充套件包。
而這篇介紹裡的下載link 有需要許可權。總之， 有點麻煩。
在Ext JS 4的新版本中，完全可以不用這種方式。
Ext JS API 中有以下這個Class, 用它構造的store 就可以實現分頁效果了。
需要特別注意的是 Ext 的匯入包中ext-all.js 並沒包含這個類， 看上去這個是作為擴充套件包。
所以使用前需要匯入這個包的 定義js 檔案，或是使用Ext 的動態載入方式匯入。
直接看例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>
<script type="text/javascript" src="../lib/extjs/ux/data/PagingMemoryProxy.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var itemsPerPage = 4;
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
pageSize: itemsPerPage,
proxy: {
type: 'pagingmemory',
data: [
{ 'name': 'ALisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" },
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]
}
});
store.loadPage(1);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: '100%',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>1.一定要匯入PagingMemoryProxy.js
<script type="text/javascript" src="../lib/extjs/ux/data/PagingMemoryProxy.js"></script>
也可以使用動態匯入的方式（先設定允許動態匯入和匯入的檔案路徑，接著使用require 方式匯入）
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'lib/extjs/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy'
]);2. store 的proxy 裡的type一定要是 'pagingmemory'。 如果要是按照一般的store 方式定義。
則在頁面上 toolbar 會有， 但是一次會把所有資料顯示出來， 翻頁就沒什麼效果了。
伺服器端分頁方式
伺服器端的分頁方式和客戶端比較起來，差別僅僅在store 的定義上。
新增的PagingToolbar有前進或後退按鈕，點選的時候是會把頁面的一些資訊通過url 傳遞到服務端。類似 ?_dc=1374646308167&page=2&start=4&limit=4
以jsp 來說，就可以通過request.getParameter得到這些值了。
String sPage = request.getParameter("page");
String sStart = request.getParameter("start");
String sLimit = request.getParameter("limit");
有了這些值，就可以在服務端做一些過濾了， 看例子：有兩個檔案
testPageGrid.html
pageGridData.jsp -- jsp 輸出服務端資料
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<script>
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../lib/extjs/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy'
]);
Ext.onReady(function(){
var itemsPerPage = 4;
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'pageGridData.jsp',
reader: {
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.loadPage(1);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: '100%',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html><%
response.setContentType( "text/html; charset=UTF-8" );
//page=2&start=4&limit=4
String sPage = request.getParameter("page");
String sStart = request.getParameter("start");
String sLimit = request.getParameter("limit");
int iPage = Integer.valueOf(sPage);
int iStart = Integer.valueOf(sStart);
int iLimit = Integer.valueOf(sLimit);
int totalCount = 12;
StringBuffer dataBuffer = new StringBuffer();
dataBuffer.append("{totalCount:'").append(totalCount).append("',");
dataBuffer.append("items:[");
for(int i =0;i<iLimit;i++)
{
dataBuffer.append("{");
String name = "jack_"+sPage+"_"+String.valueOf(i);
String mail = "jack"+sPage+"_"+String.valueOf(i)+"@email.com";
String phone = "000-"+sPage+"_"+String.valueOf(i);
dataBuffer.append("name:'"+name+"',");
dataBuffer.append("email:'"+mail+"',");
dataBuffer.append("phone:'"+phone+"'");
dataBuffer.append("}");
if(i<iLimit-1)
{
dataBuffer.append(",");
}
}
dataBuffer.append("]");
dataBuffer.append("}");
out.write(dataBuffer.toString());
out.flush();
%>需特別注意的是：
1. 一定要通過http url 的方式訪問測試。放在tomcat 或是weblogic 中。
2. store 中要指定reader 的totalProperty。否則就只有一頁了。
相關推薦
[Ext JS 4] Grid 實戰之分頁功能
前言 分頁功能的實現有兩種途徑： 一種是服務端分頁方式， 也就是web客戶端傳遞頁碼引數給服務端，服務端根據頁面引數返回指定條數的資料。也就是要多少取多少。這種方式比較適合Grid 的資料量很大，需分批取。 另一種是客戶端分頁方式， 一次性從服務端取回所有的資料在客戶端
《Ext JS 4.2實戰》
3月底各大網店新華書店均有銷售 內容簡介 本書是一本實戰系列的書，主要通過簡單的CMS系統的開發過程，介紹了使用Ext JS 4.2開發應用程式的新模式和新思路。本書可以說是作者的集大成之做，是作者使用ExtJS進行開發實踐的經驗之談。本書不單是一本學習Ext JS的書籍
MyBatis精通之路之分頁功能的實現
avi 一個 冗余 details 結果 nature ann email ret MyBatis精通之路之分頁功能的實現（數組分頁、sql分頁、攔截器，RowBounds分頁） 原創 2017年04月27日 21:34:48 標簽： mybatis / java /
SpringMVCDemo中，遇到的問題（四） 之分頁功能
1、背景： 線上經常出現因為研發程式碼編寫不規範，sql語句全表查詢，資料過多，硬生生把記憶體塞爆不斷GC，整個服務宕掉的情況。 引發這種場景的原因之一，歸咎在使用mybatis編寫sql語句時使用了萬能查詢語句。where 1=1之後，拼接的if條件都不符合條件。如下： 如果下面sql語句
springboot整合html之分頁功能實現
說不清楚，直接上程式碼。和展示效果：前臺：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec
【Java面試題】之分頁功能的實現
以下內容是根據網上內容以及傳智播客教學整理而來，侵刪。 分頁的實現可分為兩大類：一、資料在Java程式碼中進行分頁，然後取得當前頁資料；二、在資料庫中直接取得當前頁資料。通常面試官都希望聽到後者，因為那才是高效的方法。你如果想讓面試官覺得你的能力高的話你就先否定他的問
[Ext JS 4] 實戰之Grid, Tree Gird編輯Cell
前言本篇這裡以稍微複雜一點的Tree Grid 來介紹.在寫編輯grid 之， 先來看一下 grid 的 selType 的配置。先給一個簡單的Tree grid 的例子：Ext.onReady(function(){ var treeStore = Ext.create(
[Ext JS 4] 實戰之多選下拉單 (帶checkbox)
前言 Ext js 建立一個多選下拉單的方式很簡單， 使用Ext.form.ComboBox， 設定 multiSelect 為true 就可以了。 但是如果要在每個下拉之前加上一個checkbox， 如何實現呢？ ComboBox本身沒有這樣的配置， 有一個 “E
[Ext JS 4] 實戰之 帶week(星期)的日期選擇控制元件
前言Ext JS 3 和 Ext JS 4中都有提供日期選擇的元件(當然早期版本也有)。但是有一些日期選擇的需求是要看到星期，就是日期中的哪一天是這一年的第幾周。遺憾的是Ext js 並沒有提供這樣的配置。（針對Ext js 4來說，理想的相法是在Ext.picker.Dat
Linux內存尋址之分頁機制
緩存 itl ans linux 存儲器 apt target tar linux中 http://blog.xiaohansong.com/2015/10/05/Linux內存尋址之分頁機制/ 在上一篇文章Linux內存尋址之分段機制中，我們了解邏輯地址通過分段機制轉換為
Vue.js 開發實踐：實現精巧的無限加載與分頁功能
cti head 設定 命令 webpack transform style time default https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程，目標在於用一
day18-2-django之分頁和session
特征 request 客戶 .site none func pytho 控制 render Django-4 知識預覽 分頁器（paginator） COOKIE 與 SESSION 回到頂部 分頁器（paginator） 分頁器的使用 >>
Java EE之分頁器設計
net ons 下午 概念 div details mit 產生 log 由於數據庫實訓的課程設計，在做項目過程中，需要使項目更加規範的結構和各層間責任分離。無疑地，分頁器是其中之一。 1. 本文僅陳述分頁器如何實現，關於分頁器的其他概念，請自行搜索其他網絡資源。 2. 關
ssm整合bootstrap之分頁
java ssm pageHelper 分頁 bootstrap 分頁是我們經常會碰到的需求之一，今天我們就使用企業中很常用的mybatis分頁插件pageHelper來給大家做一個ssm整合bootstrap分頁的案例先看效果圖:一：建立數據庫student:學生表student年級表g
python-django rest framework框架之分頁
link 自己實現 -i man model 三種 imp *** efault 1. 以前django做的分頁組件當數據量特別大的時候，性能不是很高，有以下三種方式處理： a. 記錄當前訪問頁的最後一條數據id，往後取多少條 b. 最多顯示1
操作系統筆記（十）內存管理之分頁，分段和段頁式
分段式內存管理 筆記 關系 代碼 保護 系統 長度 段頁式內存管理 bit 基本內存管理： 進程占用空間必須連續，導致外部碎片以及附加的compaction 整個進程的swap in 和 swap out十分耗時。 解決：分頁 ->內存空間不必連續，無外部碎片，
Django之分頁
Django 分頁一、Django的分頁器（paginator）1、批量導入數據book_list = [] for i in range(100): book_obj = Book(title="Book_%s" % i, price=i * i) book_list.
MySQL（十）DQL之分頁查詢
-c lar jpg not 列表 img IE class HERE 一、應用場景 當要查詢的條目數太多，一頁顯示不全 二、語法 select 查詢列表 from 表 limit 【offset，】size; 2.1、註意： ffset代表的是起始的條目索引，默認從0卡死
Springboot整合Mybatis 之分頁插件使用
-- 插件 pri git AS set PE AC 一次 1: 引入jar包 <!-- 引入MyBatis分頁插件--> <dependency> <groupId>com.github.pagehelper</group
MongoDB動態條件之分頁查詢
實體類 其他 integer att 字符串匹配 uil .class bsp ddc 一、使用QueryByExampleExecutor 1. 繼承MongoRepository public interface StudentRepository extends M