extjs學習筆記（四--2）帶分頁的grid

原創

2020-02-25 09:53

// 定製用戶界面
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 = '' + record.data.excerpt + '';
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 '<a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a><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} by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
126 }
127 }) 運行下看看效果，我們可以看到在獲取數據的時候，頁面被動畫遮蓋住，如圖：

 當數據加載完成，我們看到數據在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的值來計算出應當返回的數據並且按照正確的格式來發送給客戶端。至於服務器端如何獲得客戶端傳遞過來的參數和如何發送數據給客戶端，可參閱本系列的第一節。