資源甘特圖教程.doc

ExtJS 資源甘特圖序言3簡(jiǎn)介4ExtJS資源甘特圖功能特性4資源甘特圖運(yùn)行效果5如何安裝61.下載運(yùn)行6打開(kāi)ASP.NET項(xiàng)目6運(yùn)行示例7開(kāi)發(fā)入門(mén)7甘特圖控件的基本原理7DataStore10SchedulerPanel11數(shù)據(jù)結(jié)構(gòu)12資源的數(shù)據(jù)結(jié)構(gòu)12事件的數(shù)據(jù)結(jié)構(gòu)14加載數(shù)據(jù)15保存數(shù)據(jù)16實(shí)現(xiàn)增刪改查接口16ASP.NET后臺(tái)操作17自定義資源甘特圖18自定義列18自定義行19自定義單元格20自定義編輯器21編輯器只讀事件22自定義條形圖23自定義樣式23自定義提示框24時(shí)間刻度和自定義25高級(jí)應(yīng)用28大數(shù)據(jù)量和性能優(yōu)化28附錄一 Extjs中的DataStore29Record29Store30DataReader331）ArrayReader332）JsonReader343）XmlReader35DataProxy和自定義Store36序言手冊(cè)包括ExtJS資源甘特圖的新手入門(mén)、組件體系結(jié)構(gòu)及使用、ExtJS資源甘特圖中各功能的使用方法及示例應(yīng)用等，是一個(gè)非常適合新手的ExtJS資源甘特圖入門(mén)手冊(cè)。本手冊(cè)主要是針對(duì)ExtJS資源甘特圖2.0 進(jìn)行介紹，全部代碼、截圖等都是基于ExtJS資源甘特圖2.0。簡(jiǎn)介資源甘特圖又叫負(fù)荷圖，其縱軸不再列出活動(dòng)，而是列出整個(gè)部門(mén)或特定的資源。Ext Scheduler資源甘特圖是基于Extjs核心庫(kù)的開(kāi)發(fā)的，基于WEB瀏覽器的甘特圖解決方案。 可應(yīng)用于生產(chǎn)能力進(jìn)行計(jì)劃和控制系統(tǒng)等的開(kāi)發(fā)。和Ext Gantt甘特圖一樣，Ext Scheduler資源甘特圖可與任意后端代碼（.net, jsp）集成為jsp資源甘特圖，資源甘特圖等。ExtJS資源甘特圖功能特性ExtJS資源甘特圖是使用Javascript開(kāi)發(fā)的、基于WEB瀏覽器的甘特圖解決方案，具備如下特點(diǎn)：l 可拖拽調(diào)節(jié)條形圖l 豐富的時(shí)間線刻度：支持年/月、周/日、周/時(shí)、日/時(shí)等， 用戶(hù)也可以自定義時(shí)間線模式。l 自定義列。l 卓越的性能和大數(shù)據(jù)量支持l 懶加載顯示：通過(guò)分級(jí)加載模式，能支持超大數(shù)據(jù)量顯示。l 支持右鍵菜單l 支持跟蹤甘特圖l 無(wú)需安裝瀏覽器插件l 跨瀏覽器支持l 跨服務(wù)端平臺(tái)支持l 語(yǔ)言本地化資源甘特圖運(yùn)行效果如何安裝1.下載運(yùn)行ExtJS資源甘特圖控件是一個(gè)純表現(xiàn)層的組件產(chǎn)品。下面以ASP.NET工程項(xiàng)目為例，是為了讓您更方便、快速的掌握如何將ExtJS資源甘特圖控件與您的系統(tǒng)集成開(kāi)發(fā)。使用JAVA開(kāi)發(fā)和ASP.NET類(lèi)似，這里不再敖述。 打開(kāi)ASP.NET項(xiàng)目下載Web資源甘特圖+ ASP.NET工程實(shí)例下載后，將它解壓到某個(gè)文件夾下面，請(qǐng)用VS打開(kāi)相應(yīng)的工程文件。運(yùn)行示例點(diǎn)擊運(yùn)行后，最終的運(yùn)行結(jié)果如下圖所示。開(kāi)發(fā)入門(mén)甘特圖控件的基本原理ExtJS資源甘特圖控件繼承至Extjs的GridPanel，如果你熟悉Extjs，那么使用Extjs資源甘特圖就非常的輕松；如果沒(méi)有，你需要花一點(diǎn)時(shí)間來(lái)先學(xué)習(xí)一下Extjs。ExtJS資源甘特圖控件按照MVC（模型、視圖、和控制器）的設(shè)計(jì)框架設(shè)計(jì)。 1. 模型層： 甘特圖的數(shù)據(jù)模型包括兩個(gè)方面，任務(wù)模型和依賴(lài)模型（任務(wù)之間的關(guān)聯(lián)關(guān)系）。相對(duì)應(yīng)的類(lèi)有Ext.ux.maximgb.tg.AdjacencyListStore和Ext.data.Store，而前者繼承于后者。2. 界面顯示組件：我們主要使用這個(gè)GanttPanel類(lèi)，只需要定義一些屬性就可以了。3. 控制器： 這個(gè)是由Extjs資源甘特圖內(nèi)部控制的，我們只需要在適當(dāng)?shù)臅r(shí)候，相應(yīng)一些事件就可以定制我們自己的功能。GanttPanel是可視的組件，它用于界面顯示、編輯操作、用戶(hù)交互等功能。AdjacencyListStore和Ext.data.Store是不可見(jiàn)的數(shù)據(jù)組件，負(fù)責(zé)管理數(shù)據(jù)模型和數(shù)據(jù)操作。在dataStore上的所有數(shù)據(jù)操作，比如增、刪、改、過(guò)濾、排序等，都會(huì)被ExtJS甘特圖控件監(jiān)聽(tīng)并更新界面。GanttPanel是由兩個(gè)重要的界面組件組成的：1. 左邊是數(shù)據(jù)表格或樹(shù)形表格組件， 繼承至Extjs的Datagrid。所以Datagrid的操作也可以運(yùn)用于GanttPanel，就連API也是一樣的。2. 右邊是條形圖組件，這個(gè)是Extjs資源甘特圖控件特有的。如上圖所示，左側(cè)的是數(shù)據(jù)表格或樹(shù)形表格，右側(cè)是條形圖，他們組合起來(lái)就是一個(gè)標(biāo)準(zhǔn)的資源甘特圖。我們先帖出一個(gè)最簡(jiǎn)單的，顯示一個(gè)甘特圖例子的完整代碼。讀者朋友可以對(duì)代碼有個(gè)基本的了解，然后在逐步分析各個(gè)部分的代碼。1. /定義資源的數(shù)據(jù)模型 2. var resourceStore = new Ext.data.JsonStore(3. proxy : 4. type : ajax,5. /data.js中包含資源數(shù)據(jù)6. url : data.js,7. reader : 8. type : json,9. root : staff10. 11. ,12. model : Sch.model.Resource13. ); 14. /加載事件數(shù)據(jù) 15. var eventStore = new Ext.data.JsonStore(16. model : Sch.model.Event17. );18.19. resourceStore.on(load, function() 20. eventStore.loadData(resourceSxy.reader.jsonData.tasks);21. );22. 23. /定義資源甘特圖 24. var ds = Ext.create(Sch.SchedulerPanel, 25. width : 1030,26. height : 400, 27. resourceStore : resourceStore,28. eventStore : eventStore, 29. columns : 30. 31. header : 員工, sortable:true, width:130, dataIndex : Name 32. ,33. /你可以增加其他字段34. 35. header : 職務(wù) 36. 37.38. 39. );DataStore我們寫(xiě)程序的時(shí)候，大多數(shù)情況下，都只要去更新數(shù)據(jù)集中的數(shù)據(jù)。當(dāng)我們修改了數(shù)據(jù)集中的數(shù)據(jù)甘特圖控件通過(guò)監(jiān)聽(tīng)數(shù)據(jù)改變事件，更新自己的界面視圖， 負(fù)責(zé)更新表格數(shù)據(jù)操作，例如增加行、刪除行、修改單元格、移動(dòng)、排序、過(guò)濾， 修改右邊圖表等操作?？紤]到部分讀者并不十分熟悉ExtJS，我們?cè)诟戒浿懈缴狭薊xtjs DataStore的入門(mén)指南，供大家參考。詳見(jiàn)附錄一。SchedulerPanelSchedulerPanel是我們要在網(wǎng)頁(yè)上顯示的可視化的類(lèi)。 在定義SchedulerPanel的時(shí)候需要三個(gè)最基本的要素，資源的DataStore和資源甘特圖要顯示的列，如開(kāi)始時(shí)間，結(jié)束時(shí)間等等。除了以上的基本功能，我們還可以在SchedulerPanel中定義不同的屬性，完成一些常見(jiàn)的擴(kuò)展。例如自定義列、自定義單元格內(nèi)容、自定義單元格編輯器、根據(jù)權(quán)限控制編輯器，自定義條形圖外觀、監(jiān)聽(tīng)處理拖拽事件。一個(gè)更加復(fù)雜的SchedulerPanel例子為：1. var s = Ext.create(Sch.SchedulerPanel, 2. region : center, /所占位置3. rowHeight : 30, /設(shè)置行高4. height : 350,/資源甘特圖高5. width : 900,/資源甘特圖寬6. loadMask:true,/是否顯示loading框7. columns : 8. 9. header : 員工,10. sortable:true, 11. width:130, 12. dataIndex : Name 13. 14. ,15. 16. startDate : new Date(2011, 0, 1, 6), /時(shí)間刻度開(kāi)始時(shí)間17. endDate : new Date(2011, 0, 1, 20), /時(shí)間刻度結(jié)束時(shí)間18. viewPreset: hourAndDay, /時(shí)間刻度顯示類(lèi)型 19. resourceStore : resourceStore, /資源的data store20. eventStore : eventStore, /事件的data store21. /設(shè)置操作按鈕22. tbar : 23. 24. iconCls : icon-previous,25. scale : medium,26. handler : function() 27. s.shiftPrevious();/視圖前移28. 29. ,30. 31. iconCls : icon-next,32. scale : medium,33. handler : function() 34. s.shiftNext();/視圖后移35. 36. 37. 38. );數(shù)據(jù)結(jié)構(gòu)資源甘特圖的數(shù)據(jù)結(jié)構(gòu)分為兩部分，資源的數(shù)據(jù)和事件的數(shù)據(jù)。這種設(shè)計(jì)大幅度的降低了數(shù)據(jù)之間的耦合關(guān)系，也更加接近于我們平時(shí)的數(shù)據(jù)庫(kù)設(shè)計(jì)，降低了和數(shù)據(jù)庫(kù)接口之間的難度。資源的數(shù)據(jù)結(jié)構(gòu)先看一個(gè)資源的數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)單的JSON的例子。1. staff : 2. 3. Id : a,4. Name : 羅伯特,5. Type : Sales6. ,7. 8. Id : b,9. Name : 邁克,10. Type : Sales11. ,12. 13. Id : c,14. Name : 凱特,15. Type : Product manager16. ,17. 18. Id : d,19. Name : 莉莎,20. Type : Developer21. ,22. 23. Id : e,24. Name : 大衛(wèi),25. Type : Developer26. ,27. 28. Id : f,29. Name : 艾諾得,30. Type : Developer31. ,32. 33. Id : g,34. Name : 小李,35. Type : Marketing36. ,37. 38. Id : h,39. Name : 瓊斯,40. Type : Marketing41. 42. ,43.44. 一個(gè)資源可以有很多屬性，但是必須包括以下的數(shù)據(jù)，資源甘特圖才能夠顯示出來(lái)。l Id, 資源Idl Name, 資源名稱(chēng) 事件的數(shù)據(jù)結(jié)構(gòu)事件的數(shù)據(jù)結(jié)構(gòu)非常簡(jiǎn)單，只包括三個(gè)屬性l Id，事件Idl StartDate, 開(kāi)始時(shí)間 l EndDate, 結(jié)束時(shí)間 以下是一個(gè)事件的數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)單的JSON的例子。1. tasks : 2. 3. ResourceId : a,4. Title : 任務(wù), 5. StartDate : 2010-05-22 10:00,6. EndDate : 2010-05-22 12:00,7. Location : Some office8. ,9. 10. ResourceId : b,11. Title : 其它任務(wù), 12. StartDate : 2010-05-22 13:00,13. EndDate : 2010-05-22 16:00,14. Location : Home office15. ,16. 17. ResourceId : c,18. Title : 基本任務(wù), 19. StartDate : 2010-05-22 9:00,20. EndDate : 2010-05-22 13:00,21. Location : Customer office22. 23. 以上的例子都是基于JSON的。 也就是說(shuō)，甘特圖可以讀取靜態(tài)的JSON，或者是ASP.NET、Java等后端程序生成的JSON。除了JSON，Extjs甘特圖也支持更多的數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)格式。 事實(shí)上，用戶(hù)可以任意組織存儲(chǔ)自己的項(xiàng)目數(shù)據(jù)，無(wú)論是服務(wù)端是.NET還是JAVA，無(wú)論數(shù)據(jù)庫(kù)是ORACLE還是MYSQL，無(wú)論數(shù)據(jù)傳輸方式是JSON 還是XML， Web Service，Rest等等。Extjs自身提供的強(qiáng)大Datareader，可以滿(mǎn)足各種不同的需求。加載數(shù)據(jù)我們?cè)賮?lái)看看我們的DataStore是如何寫(xiě)的。除了定義數(shù)據(jù)結(jié)構(gòu)以外，我們還定義了一個(gè)叫做Proxy的對(duì)象。1. var resourceStore = new Ext.data.JsonStore(2. proxy : 3. type : ajax,4. url : data.js,5. method：GET6. 7. ), 8. . 9. ); 在以上的例子中我們定義了一個(gè)HttpProxy， DataProxy 字面解釋就是數(shù)據(jù)代理，也可以理解為數(shù)據(jù)源，也即從哪兒或如何得到需要交給DataReader 解析的數(shù)據(jù)。數(shù)據(jù)代理（源）基類(lèi)由Ext.data.DataProxy 定義，在DataProxy的基礎(chǔ)，ExtJS 提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三個(gè)分別用于從客戶(hù)端內(nèi)存數(shù)據(jù)、Ajax 讀取服務(wù)器端的數(shù)據(jù)及從跨域服務(wù)器中讀取數(shù)據(jù)等三種實(shí)現(xiàn)。在proxy的url，我們配置了data.js,也可以是一個(gè)任意的url地址，例如http:/localhost/text.jsp 或者h(yuǎn)ttp:/localhost/text.aspx 等等。而method則可以配置為get或者post等等。EventStore的配置和這里的類(lèi)似，我們就不再贅述。保存數(shù)據(jù)實(shí)現(xiàn)增刪改查接口上一節(jié)我們講述了如何顯示甘特圖，當(dāng)用戶(hù)增加刪除了一些任務(wù)，或者改變了任務(wù)之間的依賴(lài)關(guān)系，我們?nèi)绾螌⒏膭?dòng)后的數(shù)據(jù)提交到服務(wù)器，在服務(wù)器中保存到數(shù)據(jù)庫(kù)或文件系統(tǒng)中呢？答案非常簡(jiǎn)單，只要實(shí)現(xiàn)Data Store的四個(gè)接口（增刪改查）就可以了。我們先來(lái)看一段代碼。1. var resourceStore = new Ext.data.JsonStore(2. proxy : 3. api: 4. read:webservices/Tasks.asmx/Get, 5. create:webservices/Tasks.asmx/Create, 6. destroy:webservices/Tasks.asmx/Delete, 7. update:webservices/Tasks.asmx/Update8. 9.10. ,11. model : Sch.model.Resource12. );在以上的代碼中，分別定義了四個(gè)不同的url，分別對(duì)應(yīng)著增刪改查四個(gè)操作的URL地址。例如，用戶(hù)修改了一個(gè)資源，甘特圖控件就會(huì)將修改后的數(shù)據(jù)提交到webservices/Tasks.asmx/Update。 其他的操作同理。下面我們以修改為例，看看在ASP.NET的服務(wù)器端是如何獲取修改后的數(shù)據(jù)的。ASP.NET后臺(tái)操作1. WebMethod 2. ScriptMethod 3. Public Function Update(ByVal jsonData As Employee) As Object4. Dim _db As New DataClasses1DataContext()5.6. Dim t = _db.Employees.SingleOrDefault(Function(b) b.Id = jsonData.Id)7.8. If Not t Is DBNull.Value Then9. t.Active = jsonData.Active10. t.Name = jsonData.Name11. t.Salary = jsonData.Salary12. End If13.14. _db.SubmitChanges(ConflictMode.ContinueOnConflict)15. Return New With .success = True16. End Function在以上的例子中，我們建立一個(gè)Web Service來(lái)實(shí)現(xiàn)增刪改查，這個(gè)Web Servic里面有一個(gè)Update的方法。請(qǐng)注意在該方法的前面，有ScriptMethod這樣一個(gè)申明。 他說(shuō)明這個(gè)Web Service提交的數(shù)據(jù)是一個(gè)JSON數(shù)據(jù)。函數(shù)Update的參數(shù)是一個(gè)jsonData，根據(jù)不同的業(yè)務(wù)邏輯，更新數(shù)據(jù)庫(kù)或文件系統(tǒng)。自定義資源甘特圖SchedulerPanel中默認(rèn)的設(shè)置很難滿(mǎn)足客戶(hù)多變需求，我們就針對(duì)一些常用的擴(kuò)展做一個(gè)說(shuō)明。 一般最常用的需求是，自定義多列，自定義行，自定義單元格等等。下面我們就分別來(lái)說(shuō)明。自定義列SchedulerPanel的列配置對(duì)象，描述了表頭、單元格、編輯器等重要配置。一般來(lái)說(shuō)， 我們提供一個(gè)列配置對(duì)象，顯示了“序號(hào)”、“資源名稱(chēng)”等比較典型的列。 但是有時(shí)我們會(huì)顯示更多的資源屬性，例如，資源的部門(mén)，職務(wù)，地點(diǎn)等等。自定義列非常簡(jiǎn)單，只要在配置SchedulerPanel的列配置對(duì)象中多添加一個(gè)單元既可。見(jiàn)以下例子40. var ds = Ext.create(Sch.SchedulerPanel, 41. width : 1030,42. height : 400, 43. resourceStore : resourceStore,44. eventStore : eventStore, 45. columns : 46. 47. header : 員工, sortable:true, width:130, dataIndex : Name 48. ,49. /你可以增加其他字段50. 51. header : 職務(wù), sortable :true,width : 100,dataIndex : Types 52. ,53. 54. header :更多列,sortable :true,width :100,55. dataIndex:Others 56. ,57. 58. header : 新增列, sortable : true, width : 100, 59. dataIndex : Others260. 61.62. 63. );運(yùn)行后的軟件截圖如下自定義行自定義行的需求有很多，例如，在行中顯示不同的文字顏色，定義行的背景高亮顯示等等。 以下我們以在行中顯示不同的條形圖顏色為例，說(shuō)明如何定義不同的行。關(guān)于行的配置，我們一般在eventRenderer中配置。具體代碼如下。1. viewConfig: 2. getRowClass:function(r,idx,rowParams,ds) 3. if(r.get(Others)=test) 4. returnprocessed-row; 5. 6. 7. ,以上的代碼將字段others等于test的tr中添加了一個(gè)processed-row的類(lèi)。下一步我們需要做的是在css中定義processed-row的樣式。1. 2. .processed-rowtd 3. color:red; 4. font-size:11px; 5. 6. 自定義單元格一個(gè)單元格的顯示內(nèi)容，取決于兩點(diǎn)：l dataIndex：如果配置了dataIndex，那么單元格默認(rèn)顯示行對(duì)象的dataIndex屬性。l renderer：如果有單元格渲染器，那么單元格會(huì)忽略掉dataIndex的顯示功能，而只顯示從renderer函數(shù)返回的HTML字符串。其中，單元格渲染器函數(shù)renderer是最強(qiáng)大的單元格內(nèi)容顯示工具。通過(guò)renderer函數(shù)，您可以得知是哪一行、哪一列、單元格值，并且可以結(jié)合您系統(tǒng)的權(quán)限，返回不同的HTML內(nèi)容。返回的HTML內(nèi)容是任意的，可以是圖片、超鏈接、按鈕等。下面列舉一個(gè)簡(jiǎn)單的例子。1. 2. header:工期, 3. sortable:true, 4. width:50, 5. dataIndex:Duration, 6. renderer : function (value) 7. if(value=test)8. return value+天9. else10. return value; 11. 12. 13. locked:true, 14. ,自定義編輯器如果需要快速編輯數(shù)據(jù)，就需要使用單元格編輯器。使用單元格編輯器的代碼如下： 1. 2. xtype: datecolumn,3. header:完成時(shí)間, 4. sortable:true, 5. width:90, 6. dataIndex:StartDate, 7. locked:true, 8. field:new Ext.form.DateField( 9. allowBlank : false, 10. format: Y/m/d 11. ),12. format:Y年m月d日 13. 單元格編輯器編輯時(shí)效果圖如下：編輯器只讀事件我們?cè)谄綍r(shí)的應(yīng)用中，經(jīng)常會(huì)控制甘特圖的編輯權(quán)限。 例如讓甘特圖為只讀或部分只讀?？刂普麄€(gè)甘特圖只讀非常簡(jiǎn)單，只需要下面一行語(yǔ)句就能控制。1. gantt.setReadOnly(true); 在實(shí)際的應(yīng)用中，往往要控制甘特圖的某些行只讀或者是某一個(gè)單元格只讀，這時(shí)候我們需要編寫(xiě)beforeedit回調(diào)函數(shù)了。請(qǐng)看下面的例子。1. listeners: 2. beforeedit:function(e) 3. if(e.record.get(other)=資源1) 4. returnfalse; 5. 6. 7. 這是一個(gè)beforeedit回調(diào)函數(shù)的簡(jiǎn)單例子。 beforeedit回調(diào)函數(shù)會(huì)在用戶(hù)單擊單元格之后，用戶(hù)輸入內(nèi)容之前調(diào)用，如果返回false，則禁止在單元格中輸入內(nèi)容。自定義條形圖以上我們討論的自定義內(nèi)容都是對(duì)于左邊的樹(shù)形表格，Extjs甘特圖也提供各種機(jī)制自定義右邊的條形圖。以下我們討論的自定義，都是定義某一個(gè)或幾個(gè)任務(wù)的條形圖。自定義樣式基于條形圖的HTML結(jié)構(gòu)和樣式，通過(guò)修改樣式的邊框線、背景圖片和背景色，達(dá)到修改外觀的目的。GanttPanel提供一個(gè)eventRenderer回調(diào)函數(shù)， 該函數(shù)在渲染條形圖之前被調(diào)用，返回一個(gè)css樣式或者一個(gè)css類(lèi)。以下的例子演示了，當(dāng)任務(wù)的周期超過(guò)7天，條形圖高亮（背景變?yōu)榧t色）。1. eventRenderer:function(item, resourceRec, tplData, row, col, ds) 2. if(Sch.util.Date.getDurationInDays(item.get(StartDate),item.get(EndDate)1) 3. return 4. tplData.style = background-color:red;/條形圖的樣式 5. return resourceRec.get(Name); 6. ; 7. 8. 自定義提示框ExtJS甘特圖控件有很多提示框效果，當(dāng)鼠標(biāo)移上，或進(jìn)行某些操作的時(shí)候，提供更多豐富的信息幫助用戶(hù)更好的操作。1. tooltipTpl:newExt.XTemplate( 2. ,3. 時(shí)間Ext.Date.format(values.StartDate, Y-m-d G:i),4. 任務(wù)Title,5. 地址Location ,6. 7. ).compile(),運(yùn)行結(jié)果時(shí)間刻度和自定義甘特圖提供多種不同的時(shí)間刻度的定義，用戶(hù)也可以自定義自己的時(shí)間刻度。系統(tǒng)內(nèi)置的時(shí)間刻度包括以下六種:l hourAndDay 小時(shí)和天刻度l dayAndWeek 天和周刻度l weekAndDay 周和天刻度l weekAndMonth 周和月刻度l monthAndYear 月和年刻度l year 年刻度以下是自定義時(shí)間刻度的代碼。1. Sch.preset.Manager.registerPreset(dayNightShift, 2. timeColumnWidth : 35,3. rowHeight : 32,4. displayDateFormat : G:i,5. shiftIncrement : 1,6. shiftUnit :DAY,7. timeResolution : 8. unit :MINUTE,9. increment : 1510. ,11. defaultSpan : 24,12. headerConfig : 13. bottom : 14. unit :HOUR,15. increment : 1,16. dateFormat : G17. ,18. middle : 19. unit :HOUR,20. increment : 12,21. renderer : function(startDate, endDate, headerConfig, cellIdx) 22. / Setting align on the header config object23. headerConfig.align = center;24.25. if (startDate.getHours()=0) 26. / Setting a custom CSS on the header cell element27. headerConfig.headerCls = nightShift;28. return Ext.Date.format(startDate, M d) + Night Shift;29. 30. else 31. / Setting a custom CSS on the header cell element32. headerConfig.headerCls = dayShift;33. return Ext.Date.format(startDate, M d) + Day Shift;34. 35. 36. ,37. top : 38. unit :DAY,39. increment : 1,40. dateFormat : d M Y41. 42. 43. );高級(jí)應(yīng)用大數(shù)據(jù)量和性能優(yōu)化甘特圖所能支持的數(shù)據(jù)量，以及界面的渲染和操作性能，是衡量一個(gè)甘特圖組件是否符合項(xiàng)目需要的重要指標(biāo)。 為了支持超過(guò)萬(wàn)級(jí)超大數(shù)據(jù)量的甘特圖，Extjs提供一個(gè)數(shù)據(jù)緩沖視圖的解決方案。使用這個(gè)方案非常簡(jiǎn)單，只需要在創(chuàng)建甘特圖的時(shí)候，加入以下代碼。1. var sched = Ext.create(Sch.panel.SchedulerGrid, 2. verticalScroller: 3. xtype: paginggridscroller,4. activePrefetch: false5. ,6.7. );8.9. var store = Ext.create(Ext.data.Store, 10. model: Employee,11. pageSize: 50,12. / allow the grid to interact with the paging scroller by buffering13. buffered: true,14. purgePageCount: 0,15. proxy: 16. type: memory17. 18. );使用個(gè)數(shù)據(jù)緩沖視圖的Extjs甘特圖能支持10萬(wàn)條以上的數(shù)據(jù)量。在我們的測(cè)試中，內(nèi)存開(kāi)銷(xiāo)和性能體驗(yàn)都非常好。附錄一 Extjs中的DataStore和甘特圖打交道，就不得不和DataStore打交道，甘特圖中的數(shù)據(jù)是存放類(lèi)型為Store 的數(shù)據(jù)存儲(chǔ)器中，通過(guò)指定甘特圖中的store 屬性來(lái)設(shè)置表格中顯示的數(shù)據(jù)，通過(guò)調(diào)用store 的load 或reload方法可以重新加載表格中的數(shù)據(jù)。ExtJS 中用來(lái)定義控件中使用數(shù)據(jù)的API 位于Ext.Data 命名空間中，本附錄我們重點(diǎn)對(duì)ExtJS 中的數(shù)據(jù)存儲(chǔ)Store 進(jìn)行介紹。Record首先需要明確是，ExtJS 中有一個(gè)名為Record 的類(lèi)，表格等控件中使用的數(shù)據(jù)是存放在Record 對(duì)象中，一個(gè)Record 可以理解為關(guān)系數(shù)據(jù)表中的一行，也可以稱(chēng)為記錄。Record 對(duì)象中即包含了記錄（行中各列）的定義信息（也就是該記錄包含哪些字段，每一個(gè)字段的數(shù)據(jù)類(lèi)型等），同時(shí)又包含了記錄具體的數(shù)據(jù)信息（也就是各個(gè)字段的值）。我們來(lái)看直接使用Record 的代碼：1. varMyRecord=Ext.data.Record.create( 2. name:title, 3. name:username,mapping:author, 4. name:loginTimes,type:int, 5. name:lastLoginTime,mapping:loginTime,type:date 6. ); 7. varr=newMyRecord( 8. title:日志標(biāo)題, 9. username:easyjf, 10. loginTimes:100, 11. loginTime:newDate() 12. ); 13. alert(MyRecord.getField(username).mapping); 14. alert(MyRecord.getField(lastLoginTime).type);首先使用Record 的create 方法創(chuàng)建一個(gè)記錄集MyRecord，MyRecord 其實(shí)是一個(gè)類(lèi)，該類(lèi)包含了記錄集的定義信息，可以通過(guò)MyRecord 來(lái)創(chuàng)建包含字段值的Record 對(duì)