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 varteamStore=newExt.data.Store({

　　7 model:'Teams',

　　8 sorters:['sport','name'],

　　9 groupField:'sport',

　　10 data:[

　　11 {name:'Aaron',sport:'TableTennis'},

　　12 {name:'Aaron',sport:'Football'},

　　13 {name:'Abe',sport:'Basketball'},

　　14 {name:'Tommy',sport:'Football'},

　　15 {name:'Tommy',sport:'Basketball'},

　　16 {name:'Jamie',sport:'TableTennis'},

　　17 {name:'Brian',sport:'Basketball'},

　　18 {name:'Brian',sport:'TableTennis'} 19 ]

　　20 }); 21

　　22 vargrid=newExt.grid.GridPanel({

　　23 renderTo:Ext.getBody(),

　　24 store:teamStore,

　　25 width:400,

　　26 height:300,

　　27 title:'SportsTeams',

　　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 });