ExtJS 4無限制捲軸的Grid

Grid是在Web瀏覽器上顯示大量表格式資料的好方式。基本上，ExtJS 4的GridPanel就是一個增強HTML表格，它可以輕鬆的擷取、排序和過濾資料，而且不限數量。在版本4，我們重構了Grid，以挑戰以前的假設和解鎖一些激動人心的新特性和功能。今天，我們要看看如何將這些功能結合起來，從而使我們的應用的更強大和更靈活。

      新的Grid中最令人興奮的一點就是它能夠處理大量資料而不無須分頁處理。在以前的版本中，所有的資料都會立即被渲染，直到行數超出了瀏覽器的記憶體限制。還有一種方法是使用分頁，一次只顯示單個頁面的資料，但這通常不是使用者的最佳選擇。

      為了實現顯示無限資料，但無須使用分頁，在ExtJS 4，我們開發了一套新的虛擬滾動系統。新系統在你滾動的時候，會無縫的切換資料，一次只渲染少量的行。不像其它無限滾動的解決方案，我們可以簡單的回收存在的行和替換它們的值，有點類似每一行都正在被重新渲染。這提供了兩大好處，一是能夠實現可變行高，二是可以隨時摺疊和展開每一行。

       建立無限制的Grid

       現在讓我們開始建立我們的無限制滾動的Grid。當然，首先要做的就是準備一個資料集，因此，在這個樣本中，我們將使用ExtJS論壇文章作為我們的資料。首先，我們要建立一個模型，它表示一個論壇的主題：

1   Ext . define ( Thread ,   { 
2       extend :   Ext . data . Model , 
3     
4       idProperty :   threadid , 
5       fields :   [ 
6           threadid ,   title ,   forumtitle ,   forumid ,   author ,   lastposter ,   excerpt ,   replycount , 
7           { name :   lastpost ,   type :   date ,   dateFormat :   timestamp } 
8       ] 
9   } ) ; 

      大多數欄位可以簡單的只指定名稱，系統會自動將其類型設定為自動類型。特殊的地方是lastpost，需要設定dateFormat屬性，以讓其可以正確處理伺服器端返回的日期值。現在，已經有了一個論壇主題模型的定義，可以使用Store讓它從論壇返回資料：

1   var   store   =   Ext . create ( Ext . data . Store ,   { 
2       model :   Thread , 
3       pageSize :   200 , 
4       autoLoad :   true , 
5     
6       remoteSort :   true , 
7       sorters :   { 
8           property :   lastpost , 
9           direction :   DESC  
10       } , 
11     
12       proxy :   { 
13           type :   scripttag , 
14           url :   http : // www.sencha.com/forum/remote_topics/index.php, 
15           extraParams :   { 
16               total :   50000 
17           } , 
18           reader :   { 
19               type :   json , 
20               root :   topics , 
21               totalProperty :   totalCount  
22           } , 
23           simpleSortMode :   true 
24       } 
25   } ) ; 

      在這裡，使用了幾個Store的配置。我們定義了的ScriptTagProxy，它將使用JSON-P載入資料，也就是會使用JSONReader去處理返回的資料，其中的extraParams屬性將高速伺服器返回50000條資料。我們還定義了pageSize屬性讓伺服器，從而讓伺服器每次只返回200條資料。

      當使用者通過捲軸滾動資料時，無限制滾動Grid將使用這些配置以資料區塊的形式去下載200條資料，這處理將在當使用者操作到接近當前資料的邊界時發生，例如，當前載入了200條記錄，當使用者滾動到大約150個記錄時，Grid會去載入下一個資料區塊。

      現在，已經建立了模型和Store，最後的工作就是建立Grid了。這和建立其它的Grid沒什麼不同，唯一的區別就是需要使用paginggridscroller組件：

1   Ext . create ( Ext . grid . GridPanel ,   { 
2       width :   700 , 
3       height :   500 , 
4       renderTo :   Ext . getBody ( ) , 
5       store :   store , 
6     
7       verticalScroller :   { 
8           xtype :   paginggridscroller  
9       } , 
10     
11       columns :   [ 
12           { 
13               xtype :   rownumberer , 
14               width :   40 , 
15               sortable :   false 
16           } , 
17           { 
18               text :   " Topic " , 
19               dataIndex :   title , 
20               flex :   1 
21           } , 
22           { 
23               text :   " Replies " , 
24               dataIndex :   replycount , 
25               align :   center , 
26               width :   70 
27           } , 
28         &n