ExtJS 4 Grid組件

咱們正在努力爲ExtJS4作準備,到目前爲止,咱們已經發布了3個開發者預覽版,咱們的目標是爭取在4到6周內或爭取更快的時間內發佈最終版本。在最近的開發者預覽版，咱們首次發佈了新的Grid組件。新的grid已經重寫，並且比3.x版本的有更多功能。新的grid不但大幅提升了性能，並且更加靈活，所以擴展它和增長新的功能比以往更容易。本文將介紹這些新的特性。

智能渲染

在Extjs 3，Grid工做得至關好，不過它是根據「最小公分母」方法來實現其豐富功能的，它始終根據每一個Gird的功能生成全部的標記。在大多數狀況下，這顯得過於沉重。在ExtJS 4，默認的Grid只有輕量級的標記，以及在渲染時，只附加由開發者定義的功能所需的標記。這使頁面渲染速度和Grid性能都得到了巨大的提高。

標準化佈局

隨着採用新的智能渲染管線，新Grid的許多部件都被製做成特定的組件並集成到標準的佈局管理系統裏，而不是依賴定製的內部標記和CSS。這樣既維持了完美的單像素UI體驗，又把Gird和其他框架的渲染處理統一塊兒來。

DataView

在ExtJS 4，新的GridView擴展自標準的DataView類，這不只最大限度的減小了重複代碼，也使得Gird更容易定製。由於它擴展自DataView，因此新的Grid不管使用任何視圖，都可以使用相同的選擇模型，包括經過鍵盤操做的非連續選擇。

功能支持

在Extjs 3，很容易爲Gird增長新功能，可是沒有一個統一標準的方法。許多附加功能都是使用插件方式提供的，而有些是經過繼承子類方式提供。這使某些功能結合起來使用至關困難（若是不是不可能）。

在ExtJS 4中，可經過Ext.grid.Feature這個基類靈活的擴展Grid的功能。Grid的底層模版可經過Feature類修改，從而可在Grid視圖生成時修飾和改變標記。Feature類提供了強大的替代舊的GridView的子類，這樣可使它容易混合和匹配兼容功能。在Grid中新功能的例子包括RowWrap、RowBody和Grouping。

虛擬滾動

ExtJS 4的Grid如今支持在渲染過程當中緩衝數據，它將提供一個虛擬的，數據負載均衡的視圖。GRid如今能夠輕鬆支持沒有分頁的數百甚至上千條的數據，比在ExtJS 3中Grid處理大量數據時的性能提升很多。

編輯改進

在Extjs 3中，開發者要在Grid中實現編輯功能，須要使用Editorgrid，這限制了Grid的靈活性。在ExtJS 4中，可經過Editing插件在任何Grid實例中實現該功能，在全部Grid中均可以重複使用該插件。此外，在ExtJS 3中流行的RowEditor擴展，在ExtJs 4已提高爲一個一流的和徹底支持的框架組件。

一個例子

 

下面是一個使用ExtJS 4定義的具體分組功能的基本Grid。在一個例子中涵蓋全部新的功能顯得不太現實，於是本例子只是讓你體驗一下新的Grid。正如你所看到的，Grid的定義方式與ExtJS 3很是類似，但分組功能如今定義起來很是簡單，再也不象ExtJS 3那樣，須要經過定義GroupingView實例來實現。這僅僅是ExtJS 4中靈活性的其中一個例子。此外，分組如今能夠直接在標準Store中實現，從而再也不須要使用GroupingStore。

1	Ext . onReady ( function ( ) {
2	Ext . regModel ( ' Teams ' , {
3	fields : [ ' name ' , ' sport ' ]
4	} ) ;
5
6	var teamStore = new Ext . data . Store ( {
7	model : ' Teams ' ,
8	sorters : [ ' sport ' , ' name ' ] ,
9	groupField : ' sport ' ,
10	data : [
11	{ name : ' Aaron ' , sport : ' Table Tennis ' } ,
12	{ name : ' Aaron ' , sport : ' Football ' } ,
13	{ name : ' Abe ' , sport : ' Basketball ' } ,
14	{ name : ' Tommy ' , sport : ' Football ' } ,
15	{ name : ' Tommy ' , sport : ' Basketball ' } ,
16	{ name : ' Jamie ' , sport : ' Table Tennis ' } ,
17	{ name : ' Brian ' , sport : ' Basketball ' } ,
18	{ name : ' Brian ' , sport : ' Table Tennis ' }
19	]
20	} ) ;
21
22	var grid = new Ext . grid . GridPanel ( {
23	renderTo : Ext . getBody ( ) ,
24	store : teamStore ,
25	width : 400 ,
26	height : 300 ,
27	title : ' Sports Teams ' ,
28	items : [ {
29	features : [ {
30	ftype : ' grouping '
31	} ] ,
32	headers : [ {
33	text : ' Name ' ,
34	flex : 1 ,
35	dataIndex : ' name '
36	} , {
37	text : ' Sport ' ,
38	dataIndex : ' sport '
39	} ]
40	} ]
41	} ) ;
42	} ) ;