因此，現(xiàn)在幾乎所有的grid控件都會(huì)支持分頁(yè)功能。extjs也不例外，它對(duì)分頁(yè)也提供了強(qiáng)大而方便的支持，使得我們?cè)诜猪?yè)處理上可以得心應(yīng)手。
在extjs中，類Ext.PagingToolbar封裝了關(guān)于分頁(yè)的操作，該類從Toolbar繼承而來(lái)，單從名字上看，我們也猜得出這是一個(gè)能夠處理分頁(yè)的工具欄。好吧，那我們就來(lái)看看如何構(gòu)造這樣一個(gè)工具欄吧。PagingToolbar類的構(gòu)造函數(shù)需要一個(gè)json對(duì)象來(lái)進(jìn)行配置，在js中，使用json對(duì)象來(lái)提供所需參數(shù)非常方便，這樣使得我們可以只填寫(xiě)感興趣的參數(shù)，并且不必關(guān)心參數(shù)的順序。我們的分頁(yè)工具欄常用的配置參數(shù)包括：
pageSize：每頁(yè)顯示的記錄數(shù)，默認(rèn)是20。
store：這個(gè)和grid里邊的store參數(shù)是一樣的，因?yàn)榉猪?yè)也需要和數(shù)據(jù)打交道，所以需要這個(gè)參數(shù)。
displayMsg：顯示的分頁(yè)狀態(tài)信息，例如“第{0}-第{1}條，一共{2}條"，注意一定要有大括號(hào)括起來(lái)的0，1，2，分別代表當(dāng)前頁(yè)的開(kāi)始，結(jié)束，還有全部的記錄數(shù)，其它的字自己隨便寫(xiě)吧，只要讀起來(lái)通順就可以了，該信息會(huì)顯示在分頁(yè)工具欄的右側(cè)。
displayInfo：是否顯示displayMsg，默認(rèn)是不顯示。
emptyMsg：沒(méi)有記錄時(shí)顯示的文本。
items：要在工具欄上顯示的項(xiàng)，我們?cè)跇?gòu)造之后再來(lái)看一下都可以有哪些項(xiàng)。
好了，現(xiàn)在可以構(gòu)造我們的分頁(yè)工具欄了，不過(guò)因?yàn)槲覀兊膮?shù)里邊需要一個(gè)Store類的對(duì)象，所以我們先來(lái)構(gòu)造它：
復(fù)制代碼 代碼如下:
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'
],
// 因?yàn)榭缬颍允褂肧criptTagProxy，在同一個(gè)域里邊用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});

這一次，我們使用了JsonStore類來(lái)構(gòu)造所需要的Store對(duì)象，顧名思義，這是用來(lái)轉(zhuǎn)化json格式的數(shù)據(jù)的。另外我們是從外部服務(wù)器來(lái)獲取數(shù)據(jù)，所以代碼相對(duì)于原來(lái)從數(shù)組里邊獲得數(shù)據(jù)要復(fù)雜一些，我們來(lái)看看用到的那些參數(shù)的意義：
root：包含數(shù)據(jù)行集合的屬性名字。
totalProperty：表示數(shù)據(jù)集中全部記錄數(shù)的屬性名字，只有在分頁(yè)的時(shí)候才需要。
idProperty：數(shù)據(jù)行中用來(lái)作為標(biāo)識(shí)的屬性的名字。
remoteSort：排序的時(shí)候是否通過(guò)proxy獲得新的數(shù)據(jù)，默認(rèn)是false。
fields：上一個(gè)系列里邊提到過(guò)。這里多了一個(gè)mapping，它是將數(shù)據(jù)里邊的名字映射成封裝后的Record字段的名字，名字相同的時(shí)候，可以忽略。
proxy：數(shù)據(jù)的來(lái)源。在這里，我們只需要知道我們的數(shù)據(jù)是從url指明的地址獲得的，因?yàn)檫@個(gè)地址是跨域的，所以使用ScriptTagProxy。
需要注意的是，從服務(wù)器返回的數(shù)據(jù)必須具有如下的格式：
復(fù)制代碼 代碼如下:
{
"totalCount":10000, //對(duì)應(yīng)totalProperty屬性的值
"topics":[ //對(duì)應(yīng)root戶型的值
//這里是json對(duì)象的集合，每一個(gè)對(duì)象的屬性
//需要和fields里邊name屬性的值對(duì)應(yīng)
//觀察url返回給我們的數(shù)據(jù)可以更清楚的看明白這一點(diǎn)
]
}

接下來(lái)就是構(gòu)造我們的分頁(yè)工具欄了：

復(fù)制代碼 代碼如下:
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "沒(méi)有文章",
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是工具欄上項(xiàng)的集合，默認(rèn)的類型是按鈕。我們這里只用到了兩項(xiàng)，“-”代表分隔符，第二項(xiàng)就是一個(gè)button，我們來(lái)看看其中每個(gè)屬性都表示什么：
pressed：表示按鈕在開(kāi)始的時(shí)候是否被按下，只有enableToggle為真的時(shí)候才有用。
enableToggle：指示button是否能處于被按下的狀態(tài)。
text：按鈕上顯示的文本。
cls：按鈕的css類。
toggleHander：設(shè)置enableToggle為true時(shí)點(diǎn)擊按鈕時(shí)的事件處理函數(shù)。
是時(shí)候把分頁(yè)工具欄和grid組合在一起了，這次我們的grid沒(méi)有使用ColumnModel而是使用columns屬性，同時(shí)我們使用了viewConfig來(lái)對(duì)用戶界面進(jìn)行配置，看下完整的代碼吧：
復(fù)制代碼 代碼如下:
///<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() {
//構(gòu)造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'
],
// 因?yàn)榭缬颍允褂肧criptTagProxy，在同一個(gè)域里邊用HttpProxy
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort("lastpost", "DESC"); //設(shè)置默認(rèn)的排序列和方向
//構(gòu)造帶分頁(yè)功能的工具欄
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: '預(yù)覽',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
//構(gòu)造帶有分頁(yè)工具欄的grid
var grid = new Ext.grid.GridPanel({
renderTo:"grid",
width: 700,
height: 500,
title: '帶分頁(yè)功能的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: "回復(fù)數(shù)",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
}, {
id: 'last',
header: "最后回復(fù)",
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';
}
},
//在頂部的分頁(yè)工具欄
//tbar: pagingToolbar,
// 在底部的分頁(yè)工具欄
bbar: pagingToolbar
});
// 加載數(shù)據(jù)
store.load({ params: { start: 0, limit: 25} });
// 主題列的renderer函數(shù)
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);
}
//最后回復(fù)列的renderer函數(shù)
function renderLast(value, p, r) {
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
})

運(yùn)行下看看效果，我們可以看到在獲取數(shù)據(jù)的時(shí)候，頁(yè)面被動(dòng)畫(huà)遮蓋住，如圖：

當(dāng)數(shù)據(jù)加載完成，我們看到數(shù)據(jù)在grid中分頁(yè)顯示，并且按照最后發(fā)表列降序排列，其中作者列被隱藏：

當(dāng)點(diǎn)擊列名進(jìn)行排序時(shí)，會(huì)從服務(wù)器上重新加載新的數(shù)據(jù)，點(diǎn)擊向右的箭頭，可以翻頁(yè)，還可以點(diǎn)點(diǎn)“預(yù)覽”按鈕看看效果。雖然這次的代碼相對(duì)最簡(jiǎn)單的grid多了不少，但效果也cool了不少。我們從頭開(kāi)始把代碼理一下吧：
    第8行使用了圖片占位符，它指向的圖片是一張空?qǐng)D片。在extjs的庫(kù)文件中，根據(jù)需要會(huì)把這個(gè)圖片占位符替換成另一張圖片，在我們的例子中，如果去掉這一行，影響不會(huì)太大，只是標(biāo)題欄中“最后回復(fù)”旁邊向下的小箭頭會(huì)不見(jiàn)了。我們還是養(yǎng)成把這一行寫(xiě)上的習(xí)慣吧。
    11-28行構(gòu)造了一個(gè)Store類的對(duì)象，這個(gè)沒(méi)什么好說(shuō)的了。
    第30行設(shè)置lastpost列為默認(rèn)排序的列，并且是按降序排列，注意“DESC"必須是大寫(xiě)，升序是“ASC”。
    33-51行構(gòu)造帶分頁(yè)的工具欄，前邊都已經(jīng)說(shuō)過(guò)了。
    54-112行構(gòu)造帶有分頁(yè)功能的grid。
        其中第60行指示鼠標(biāo)在行上懸浮時(shí)行不會(huì)高亮顯示。
        61行指示用戶不能對(duì)grid進(jìn)行選擇。
        62行指示在加載數(shù)據(jù)的時(shí)候遮蓋住頁(yè)面，我們可以在截圖上看到效果，不過(guò)還是推薦自己運(yùn)行看下效果，畢竟這里顯示的是動(dòng)畫(huà)。當(dāng)數(shù)據(jù)加載完畢之后遮蓋效果消失。
        94-105行設(shè)置用戶界面，我們看看每個(gè)參數(shù)的意義：
            forceFit：是否強(qiáng)制列調(diào)整寬度使得不出現(xiàn)水平滾動(dòng)條，默認(rèn)是false。
            enableRowBody：為true的時(shí)候允許每行增加一個(gè)tr元素用來(lái)擴(kuò)展數(shù)據(jù)行。
            showPreview：自定義的bool類型的屬性，用來(lái)在代碼中控制是否顯示預(yù)覽。
            getRowClass：這是一個(gè)方法，用來(lái)改寫(xiě)行的css樣式，它有四個(gè)參數(shù)，第一個(gè)是代表該行數(shù)據(jù)的Record對(duì)象，第二個(gè)是行的索引，第三個(gè)就是enableRowBody設(shè)置true時(shí)傳遞進(jìn)來(lái)的
                                      參數(shù)，可以通過(guò)該參數(shù)的body屬性擴(kuò)展行數(shù)據(jù)。該方法應(yīng)當(dāng)返回一個(gè)css類名。我們的例子中，根據(jù)showPreview的值來(lái)動(dòng)態(tài)顯示文章的摘要信息。
        111行將分頁(yè)工具欄顯示在grid底部，如果想顯示在頂部可以用tbar來(lái)代替bbar。
        115行向服務(wù)器發(fā)出請(qǐng)求獲取數(shù)據(jù)，extjs會(huì)以post方式將params中的參數(shù)發(fā)送給服務(wù)器，其中start指明從地幾條數(shù)據(jù)開(kāi)始，limit則表示每頁(yè)顯示多少數(shù)據(jù)。
    118到126是兩個(gè)renderer函數(shù)，在上一個(gè)系列中已經(jīng)解釋過(guò)用法了。
    最后要指出的是，分頁(yè)的功能其實(shí)還是在服務(wù)器端完成的。當(dāng)在客戶端進(jìn)行翻頁(yè)的時(shí)候，會(huì)和115行一樣提交參數(shù)，我們需要在服務(wù)器端根據(jù)傳遞過(guò)來(lái)的star和limit的值來(lái)計(jì)算出應(yīng)當(dāng)返回的數(shù)據(jù)并且按照正確的格式來(lái)發(fā)送給客戶端。至于服務(wù)器端如何獲得客戶端傳遞過(guò)來(lái)的參數(shù)和如何發(fā)送數(shù)據(jù)給客戶端，可參閱本系列的第一節(jié)。

JavaScript技術(shù)：extjs 學(xué)習(xí)筆記 四 帶分頁(yè)的grid，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。