|
|
因此，現在幾乎所有的grid控件都會支持分頁功能。extjs也不例外，它對分頁也提供了強大而方便的支持，使得我們在分頁處理上可以得心應手。
在extjs中，類Ext.PagingToolbar封裝了關于分頁的操作，該類從Toolbar繼承而來，單從名字上看，我們也猜得出這是一個能夠處理分頁的工具欄。好吧，那我們就來看看如何構造這樣一個工具欄吧。PagingToolbar類的構造函數需要一個json對象來進行配置，在js中，使用json對象來提供所需參數非常方便，這樣使得我們可以只填寫感興趣的參數，并且不必關心參數的順序。我們的分頁工具欄常用的配置參數包括：
pageSize：每頁顯示的記錄數，默認是20。
store：這個和grid里邊的store參數是一樣的，因為分頁也需要和數據打交道，所以需要這個參數。
displayMsg：顯示的分頁狀態信息，例如“第{0}-第{1}條，一共{2}條"，注意一定要有大括號括起來的0，1，2，分別代表當前頁的開始，結束，還有全部的記錄數，其它的字自己隨便寫吧，只要讀起來通順就可以了，該信息會顯示在分頁工具欄的右側。
displayInfo：是否顯示displayMsg，默認是不顯示。
emptyMsg：沒有記錄時顯示的文本。
items：要在工具欄上顯示的項，我們在構造之后再來看一下都可以有哪些項。
好了，現在可以構造我們的分頁工具欄了，不過因為我們的參數里邊需要一個Store類的對象，所以我們先來構造它：
復制代碼 代碼如下:
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' },
{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 因為跨域，所以使用ScriptTagProxy，在同一個域里邊用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
這一次，我們使用了JsonStore類來構造所需要的Store對象，顧名思義，這是用來轉化json格式的數據的。另外我們是從外部服務器來獲取數據，所以代碼相對于原來從數組里邊獲得數據要復雜一些，我們來看看用到的那些參數的意義：
root：包含數據行集合的屬性名字。
totalProperty：表示數據集中全部記錄數的屬性名字，只有在分頁的時候才需要。
idProperty：數據行中用來作為標識的屬性的名字。
remoteSort：排序的時候是否通過proxy獲得新的數據，默認是false。
fields：上一個系列里邊提到過。這里多了一個mapping，它是將數據里邊的名字映射成封裝后的Record字段的名字，名字相同的時候，可以忽略。
proxy：數據的來源。在這里，我們只需要知道我們的數據是從url指明的地址獲得的，因為這個地址是跨域的，所以使用ScriptTagProxy。
需要注意的是，從服務器返回的數據必須具有如下的格式：
復制代碼 代碼如下:
{
"totalCount":10000, //對應totalProperty屬性的值
"topics":[ //對應root戶型的值
//這里是json對象的集合，每一個對象的屬性
//需要和fields里邊name屬性的值對應
//觀察url返回給我們的數據可以更清楚的看明白這一點
]
}
接下來就是構造我們的分頁工具欄了：
復制代碼 代碼如下:
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "沒有文章",
items: [
'-', {
pressed: true,
enableToggle: true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
items是工具欄上項的集合，默認的類型是按鈕。我們這里只用到了兩項，“-”代表分隔符，第二項就是一個button，我們來看看其中每個屬性都表示什么：
pressed：表示按鈕在開始的時候是否被按下，只有enableToggle為真的時候才有用。
enableToggle：指示button是否能處于被按下的狀態。
text：按鈕上顯示的文本。
cls：按鈕的css類。
toggleHander：設置enableToggle為true時點擊按鈕時的事件處理函數。
是時候把分頁工具欄和grid組合在一起了，這次我們的grid沒有使用ColumnModel而是使用columns屬性，同時我們使用了viewConfig來對用戶界面進行配置，看下完整的代碼吧：
復制代碼 代碼如下:
///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-13
*版本：1.0
*博客地址：http://yage.cnblogs.com
*/
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.onReady(function() {
//構造store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' },
{ name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 因為跨域，所以使用ScriptTagProxy，在同一個域里邊用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort("lastpost", "DESC"); //設置默認的排序列和方向
//構造帶分頁功能的工具欄
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: '第{0}-第{1}條，一共{2}條',
emptyMsg: "No topics to display",
items: [
'-', {
pressed: true,
enableToggle: true,
text: '預覽',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
//構造帶有分頁工具欄的grid
var grid = new Ext.grid.GridPanel({
renderTo:"grid",
width: 700,
height: 500,
title: '帶分頁功能的grid',
store: store,
trackMouseOver: false,
disableSelection: true,
loadMask: true,
// grid的列
columns: [{
id: 'topic',
header: "主題",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
}, {
header: "作者",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
}, {
header: "回復數",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
}, {
id: 'last',
header: "最后回復",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
}],
// 定制用戶界面
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass: function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '<p>' + record.data.excerpt + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
//在頂部的分頁工具欄
//tbar: pagingToolbar,
// 在底部的分頁工具欄
bbar: pagingToolbar
});
// 加載數據
store.load({ params: { start: 0, limit: 25} });
// 主題列的renderer函數
function renderTopic(value, p, record) {
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
//最后回復列的renderer函數
function renderLast(value, p, r) {
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
})
運行下看看效果，我們可以看到在獲取數據的時候，頁面被動畫遮蓋住，如圖： 
當數據加載完成，我們看到數據在grid中分頁顯示，并且按照最后發表列降序排列，其中作者列被隱藏：
當點擊列名進行排序時，會從服務器上重新加載新的數據，點擊向右的箭頭，可以翻頁，還可以點點“預覽”按鈕看看效果。雖然這次的代碼相對最簡單的grid多了不少，但效果也cool了不少。我們從頭開始把代碼理一下吧：
第8行使用了圖片占位符，它指向的圖片是一張空圖片。在extjs的庫文件中，根據需要會把這個圖片占位符替換成另一張圖片，在我們的例子中，如果去掉這一行，影響不會太大，只是標題欄中“最后回復”旁邊向下的小箭頭會不見了。我們還是養成把這一行寫上的習慣吧。
11-28行構造了一個Store類的對象，這個沒什么好說的了。
第30行設置lastpost列為默認排序的列，并且是按降序排列，注意“DESC"必須是大寫，升序是“ASC”。
33-51行構造帶分頁的工具欄，前邊都已經說過了。
54-112行構造帶有分頁功能的grid。
其中第60行指示鼠標在行上懸浮時行不會高亮顯示。
61行指示用戶不能對grid進行選擇。
62行指示在加載數據的時候遮蓋住頁面，我們可以在截圖上看到效果，不過還是推薦自己運行看下效果，畢竟這里顯示的是動畫。當數據加載完畢之后遮蓋效果消失。
94-105行設置用戶界面，我們看看每個參數的意義：
forceFit：是否強制列調整寬度使得不出現水平滾動條，默認是false。
enableRowBody：為true的時候允許每行增加一個tr元素用來擴展數據行。
showPreview：自定義的bool類型的屬性，用來在代碼中控制是否顯示預覽。
getRowClass：這是一個方法，用來改寫行的css樣式，它有四個參數，第一個是代表該行數據的Record對象，第二個是行的索引，第三個就是enableRowBody設置true時傳遞進來的
參數，可以通過該參數的body屬性擴展行數據。該方法應當返回一個css類名。我們的例子中，根據showPreview的值來動態顯示文章的摘要信息。
111行將分頁工具欄顯示在grid底部，如果想顯示在頂部可以用tbar來代替bbar。
115行向服務器發出請求獲取數據，extjs會以post方式將params中的參數發送給服務器，其中start指明從地幾條數據開始，limit則表示每頁顯示多少數據。
118到126是兩個renderer函數，在上一個系列中已經解釋過用法了。
最后要指出的是，分頁的功能其實還是在服務器端完成的。當在客戶端進行翻頁的時候，會和115行一樣提交參數，我們需要在服務器端根據傳遞過來的star和limit的值來計算出應當返回的數據并且按照正確的格式來發送給客戶端。至于服務器端如何獲得客戶端傳遞過來的參數和如何發送數據給客戶端，可參閱本系列的第一節。
JavaScript技術：extjs 學習筆記 四 帶分頁的grid，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
