在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類的對象，所以我們先來構造它：
1var store = new Ext.data.JsonStore({
2 root: 'topics',
3 totalProperty: 'totalCount',
4 idProperty: 'threadid',
5 remoteSort: true,
6
7 fields: [
8 'title', 'forumtitle', 'forumid', 'author',
9 { name: 'replycount', type: 'int' },
10 { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
11 'lastposter', 'excerpt'
12 ],
13
14 // 因爲跨域，所以使用ScriptTagProxy，在同一個域裏邊用HttpProxy
15 proxy: new Ext.data.ScriptTagProxy({
16 url: 'http://extjs.com/forum/topics-browse-remote.php'
17 })
18 });
這一次，我們使用了JsonStore類來構造所需要的Store對象，顧名思義，這是用來轉化son格式的數據的。另外我們是從外部服務器來獲取數據，所以代碼相對於原來從數組裏邊獲得數據要複雜一些，我們來看看用到的那些參數的意義：
root：包含數據行集合的屬性名字。
totalProperty：表示數據集中全部記錄數的屬性名字，只有在分頁的時候才需要。
idProperty：數據行中用來作爲標識的屬性的名字。
remoteSort：排序的時候是否通過proxy獲得新的數據，默認是false。
fields：上一個系列裏邊提到過。這裏多了一個mapping，它是將數據裏邊的名字映射成封裝後的Record字段的名字，名字相同的時候，可以忽略。
proxy：數據的來源。在這裏，我們只需要知道我們的數據是從url指明的地址獲得的，因爲這個地址是跨域的，所以使用ScriptTagProxy。
需要注意的是，從服務器返回的數據必須具有如下的格式：
{
"totalCount":10000, //對應totalProperty屬性的值
"topics":[ //對應root戶型的值
//這裏是json對象的集合，每一個對象的屬性
//需要和fields裏邊name屬性的值對應
//觀察url返回給我們的數據可以更清楚的看明白這一點
]
}
接下來就是構造我們的分頁工具欄了：
1var pagingToolbar = new Ext.PagingToolbar({
2 pageSize: 25,
3 store: store,
4 displayInfo: true,
5 displayMsg: 'Displaying topics {0} - {1} of {2}',
6 emptyMsg: "一篇文章也沒有",
7 items: [
8 '-', {
9 pressed: true,
10 enableToggle: true,
11 text: 'Show Preview',
12 cls: 'x-btn-text-icon details',
13 toggleHandler: function(btn, pressed) {
14 var view = grid.getView();
15 view.showPreview = pressed;
16 view.refresh();
17 }
18}]
19 });
(不知道vs2008的格式化功能爲什麼把第18行的括號給放在最靠左邊的位置，望哪位朋友知道解決的方法告知一下。)
items是工具欄上項的集合，默認的類型是按鈕。我們這裏只用到了兩項，“-”代表分隔符，第二項就是一個button，我們來看看其中每個屬性都表示什麼：
pressed：表示按鈕在開始的時候是否被按下，只有enableToggle爲真的時候纔有用。
enableToggle：指示button是否能處於被按下的狀態。
text：按鈕上顯示的文本。
cls：按鈕的css類。
toggleHander：設置enableToggle爲true時點擊按鈕時的事件處理函數。
是時候把分頁工具欄和grid組合在一起了，這次我們的grid沒有使用ColumnModel而是使用columns屬性，同時我們使用了viewConfig來對用戶界面進行配置，看下完整的代碼吧：
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者：大笨
4*日期：2009-10-13
5*版本：1.0
6*博客地址：http://yage.cnblogs.com
7*/
8Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
9Ext.onReady(function() {
10 //構造store
11 var store = new Ext.data.JsonStore({
12 root: 'topics',
13 totalProperty: 'totalCount',
14 idProperty: 'threadid',
15 remoteSort: true,
16
17 fields: [
18 'title', 'forumtitle', 'forumid', 'author',
19 { name: 'replycount', type: 'int' },
20 { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
21 'lastposter', 'excerpt'
22 ],
23
24 // 因爲跨域，所以使用ScriptTagProxy，在同一個域裏邊用HttpProxy
25 proxy: new Ext.data.ScriptTagProxy({
26 url: 'http://extjs.com/forum/topics-browse-remote.php'
27 })
28 });
29
30 store.setDefaultSort("lastpost", "DESC"); //設置默認的排序列和方向
31
32 //構造帶分頁功能的工具欄
33 var pagingToolbar = new Ext.PagingToolbar({
34 pageSize: 25,
35 store: store,
36 displayInfo: true,
37 displayMsg: '第{0}-第{1}條，一共{2}條',
38 emptyMsg: "No topics to display",
39 items: [
40 '-', {
41 pressed: true,
42 enableToggle: true,
43 text: '預覽',
44 cls: 'x-btn-text-icon details',
45 toggleHandler: function(btn, pressed) {
46 var view = grid.getView();
47 view.showPreview = pressed;
48 view.refresh();
49 }
50}]
51 });
52
53 //構造帶有分頁工具欄的grid
54 var grid = new Ext.grid.GridPanel({
55 renderTo:"grid",
56 width: 700,
57 height: 500,
58 title: '帶分頁功能的grid',
59 store: store,
60 trackMouseOver: false,
61 disableSelection: true,
62 loadMask: true,
63
64 // grid的列
65 columns: [{
66 id: 'topic',
67 header: "主題",
68 dataIndex: 'title',
69 width: 420,
70 renderer: renderTopic,
71 sortable: true
72 }, {
73 header: "作者",
74 dataIndex: 'author',
75 width: 100,
76 hidden: true,
77 sortable: true
78 }, {
79 header: "回覆數",
80 dataIndex: 'replycount',
81 width: 70,
82 align: 'right',
83 sortable: true
84 }, {
85 id: 'last',
86 header: "最後回覆",
87 dataIndex: 'lastpost',
88 width: 150,
89 renderer: renderLast,
90 sortable: true
91}],
92
93 // 定製用戶界面
94 viewConfig: {
95 forceFit: true,
96 enableRowBody: true,
97 showPreview: true,
98 getRowClass: function(record, rowIndex, p, store) {
99 if (this.showPreview) {
100 p.body = '<p>' + record.data.excerpt + '</p>';
101 return 'x-grid3-row-expanded';
102 }
103 return 'x-grid3-row-collapsed';
104 }
105 },
106
107 //在頂部的分頁工具欄
108 //tbar: pagingToolbar,
109
110 // 在底部的分頁工具欄
111 bbar: pagingToolbar
112 });
113
114 // 加載數據
115 store.load({ params: { start: 0, limit: 25} });
116
117 // 主題列的renderer函數
118 function renderTopic(value, p, record) {
119 return String.format(
120 '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
121 value, record.data.forumtitle, record.id, record.data.forumid);
122 }
123 //最後回覆列的renderer函數
124 function renderLast(value, p, r) {
125 return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
126 }
127 })
第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的值來計算出應當返回的數據並且按照正確的格式來發送給客戶端。
pageSize：每頁顯示的記錄數，默認是20。
store：這個和grid裏邊的store參數是一樣的，因爲分頁也需要和數據打交道，所以需要這個參數。
displayMsg：顯示的分頁狀態信息，例如“第{0}-第{1}條，一共{2}條"，注意一定要有大括號括起來的0，1，2，分別代表當前頁的開始，結束，還有全部的記錄數，其它的字自己隨便寫吧，只要讀起來通順就可以了，該信息會顯示在分頁工具欄的右側。
displayInfo：是否顯示displayMsg，默認是不顯示。
emptyMsg：沒有記錄時顯示的文本。
items：要在工具欄上顯示的項，我們在構造之後再來看一下都可以有哪些項。
好了，現在可以構造我們的分頁工具欄了，不過因爲我們的參數裏邊需要一個Store類的對象，所以我們先來構造它：
1var store = new Ext.data.JsonStore({
2 root: 'topics',
3 totalProperty: 'totalCount',
4 idProperty: 'threadid',
5 remoteSort: true,
6
7 fields: [
8 'title', 'forumtitle', 'forumid', 'author',
9 { name: 'replycount', type: 'int' },
10 { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
11 'lastposter', 'excerpt'
12 ],
13
14 // 因爲跨域，所以使用ScriptTagProxy，在同一個域裏邊用HttpProxy
15 proxy: new Ext.data.ScriptTagProxy({
16 url: 'http://extjs.com/forum/topics-browse-remote.php'
17 })
18 });
這一次，我們使用了JsonStore類來構造所需要的Store對象，顧名思義，這是用來轉化son格式的數據的。另外我們是從外部服務器來獲取數據，所以代碼相對於原來從數組裏邊獲得數據要複雜一些，我們來看看用到的那些參數的意義：
root：包含數據行集合的屬性名字。
totalProperty：表示數據集中全部記錄數的屬性名字，只有在分頁的時候才需要。
idProperty：數據行中用來作爲標識的屬性的名字。
remoteSort：排序的時候是否通過proxy獲得新的數據，默認是false。
fields：上一個系列裏邊提到過。這裏多了一個mapping，它是將數據裏邊的名字映射成封裝後的Record字段的名字，名字相同的時候，可以忽略。
proxy：數據的來源。在這裏，我們只需要知道我們的數據是從url指明的地址獲得的，因爲這個地址是跨域的，所以使用ScriptTagProxy。
需要注意的是，從服務器返回的數據必須具有如下的格式：
{
"totalCount":10000, //對應totalProperty屬性的值
"topics":[ //對應root戶型的值
//這裏是json對象的集合，每一個對象的屬性
//需要和fields裏邊name屬性的值對應
//觀察url返回給我們的數據可以更清楚的看明白這一點
]
}
接下來就是構造我們的分頁工具欄了：
1var pagingToolbar = new Ext.PagingToolbar({
2 pageSize: 25,
3 store: store,
4 displayInfo: true,
5 displayMsg: 'Displaying topics {0} - {1} of {2}',
6 emptyMsg: "一篇文章也沒有",
7 items: [
8 '-', {
9 pressed: true,
10 enableToggle: true,
11 text: 'Show Preview',
12 cls: 'x-btn-text-icon details',
13 toggleHandler: function(btn, pressed) {
14 var view = grid.getView();
15 view.showPreview = pressed;
16 view.refresh();
17 }
18}]
19 });
(不知道vs2008的格式化功能爲什麼把第18行的括號給放在最靠左邊的位置，望哪位朋友知道解決的方法告知一下。)
items是工具欄上項的集合，默認的類型是按鈕。我們這裏只用到了兩項，“-”代表分隔符，第二項就是一個button，我們來看看其中每個屬性都表示什麼：
pressed：表示按鈕在開始的時候是否被按下，只有enableToggle爲真的時候纔有用。
enableToggle：指示button是否能處於被按下的狀態。
text：按鈕上顯示的文本。
cls：按鈕的css類。
toggleHander：設置enableToggle爲true時點擊按鈕時的事件處理函數。
是時候把分頁工具欄和grid組合在一起了，這次我們的grid沒有使用ColumnModel而是使用columns屬性，同時我們使用了viewConfig來對用戶界面進行配置，看下完整的代碼吧：
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者：大笨
4*日期：2009-10-13
5*版本：1.0
6*博客地址：http://yage.cnblogs.com
7*/
8Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
9Ext.onReady(function() {
10 //構造store
11 var store = new Ext.data.JsonStore({
12 root: 'topics',
13 totalProperty: 'totalCount',
14 idProperty: 'threadid',
15 remoteSort: true,
16
17 fields: [
18 'title', 'forumtitle', 'forumid', 'author',
19 { name: 'replycount', type: 'int' },
20 { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
21 'lastposter', 'excerpt'
22 ],
23
24 // 因爲跨域，所以使用ScriptTagProxy，在同一個域裏邊用HttpProxy
25 proxy: new Ext.data.ScriptTagProxy({
26 url: 'http://extjs.com/forum/topics-browse-remote.php'
27 })
28 });
29
30 store.setDefaultSort("lastpost", "DESC"); //設置默認的排序列和方向
31
32 //構造帶分頁功能的工具欄
33 var pagingToolbar = new Ext.PagingToolbar({
34 pageSize: 25,
35 store: store,
36 displayInfo: true,
37 displayMsg: '第{0}-第{1}條，一共{2}條',
38 emptyMsg: "No topics to display",
39 items: [
40 '-', {
41 pressed: true,
42 enableToggle: true,
43 text: '預覽',
44 cls: 'x-btn-text-icon details',
45 toggleHandler: function(btn, pressed) {
46 var view = grid.getView();
47 view.showPreview = pressed;
48 view.refresh();
49 }
50}]
51 });
52
53 //構造帶有分頁工具欄的grid
54 var grid = new Ext.grid.GridPanel({
55 renderTo:"grid",
56 width: 700,
57 height: 500,
58 title: '帶分頁功能的grid',
59 store: store,
60 trackMouseOver: false,
61 disableSelection: true,
62 loadMask: true,
63
64 // grid的列
65 columns: [{
66 id: 'topic',
67 header: "主題",
68 dataIndex: 'title',
69 width: 420,
70 renderer: renderTopic,
71 sortable: true
72 }, {
73 header: "作者",
74 dataIndex: 'author',
75 width: 100,
76 hidden: true,
77 sortable: true
78 }, {
79 header: "回覆數",
80 dataIndex: 'replycount',
81 width: 70,
82 align: 'right',
83 sortable: true
84 }, {
85 id: 'last',
86 header: "最後回覆",
87 dataIndex: 'lastpost',
88 width: 150,
89 renderer: renderLast,
90 sortable: true
91}],
92
93 // 定製用戶界面
94 viewConfig: {
95 forceFit: true,
96 enableRowBody: true,
97 showPreview: true,
98 getRowClass: function(record, rowIndex, p, store) {
99 if (this.showPreview) {
100 p.body = '<p>' + record.data.excerpt + '</p>';
101 return 'x-grid3-row-expanded';
102 }
103 return 'x-grid3-row-collapsed';
104 }
105 },
106
107 //在頂部的分頁工具欄
108 //tbar: pagingToolbar,
109
110 // 在底部的分頁工具欄
111 bbar: pagingToolbar
112 });
113
114 // 加載數據
115 store.load({ params: { start: 0, limit: 25} });
116
117 // 主題列的renderer函數
118 function renderTopic(value, p, record) {
119 return String.format(
120 '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
121 value, record.data.forumtitle, record.id, record.data.forumid);
122 }
123 //最後回覆列的renderer函數
124 function renderLast(value, p, r) {
125 return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
126 }
127 })
第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的值來計算出應當返回的數據並且按照正確的格式來發送給客戶端。
