資源甘特圖教程.doc

ExtJS 資源甘特圖序言3簡介4ExtJS資源甘特圖功能特性4資源甘特圖運行效果5如何安裝61.下載運行6打開ASP.NET項目6運行示例7開發(fā)入門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實現(xiàn)增刪改查接口16ASP.NET后臺操作17自定義資源甘特圖18自定義列18自定義行19自定義單元格20自定義編輯器21編輯器只讀事件22自定義條形圖23自定義樣式23自定義提示框24時間刻度和自定義25高級應(yīng)用28大數(shù)據(jù)量和性能優(yōu)化28附錄一 Extjs中的DataStore29Record29Store30DataReader331）ArrayReader332）JsonReader343）XmlReader35DataProxy和自定義Store36序言手冊包括ExtJS資源甘特圖的新手入門、組件體系結(jié)構(gòu)及使用、ExtJS資源甘特圖中各功能的使用方法及示例應(yīng)用等，是一個非常適合新手的ExtJS資源甘特圖入門手冊。本手冊主要是針對ExtJS資源甘特圖2.0 進行介紹，全部代碼、截圖等都是基于ExtJS資源甘特圖2.0。簡介資源甘特圖又叫負荷圖，其縱軸不再列出活動，而是列出整個部門或特定的資源。Ext Scheduler資源甘特圖是基于Extjs核心庫的開發(fā)的，基于WEB瀏覽器的甘特圖解決方案。 可應(yīng)用于生產(chǎn)能力進行計劃和控制系統(tǒng)等的開發(fā)。和Ext Gantt甘特圖一樣，Ext Scheduler資源甘特圖可與任意后端代碼（.net, jsp）集成為jsp資源甘特圖，資源甘特圖等。ExtJS資源甘特圖功能特性ExtJS資源甘特圖是使用Javascript開發(fā)的、基于WEB瀏覽器的甘特圖解決方案，具備如下特點：l 可拖拽調(diào)節(jié)條形圖l 豐富的時間線刻度：支持年/月、周/日、周/時、日/時等， 用戶也可以自定義時間線模式。l 自定義列。l 卓越的性能和大數(shù)據(jù)量支持l 懶加載顯示：通過分級加載模式，能支持超大數(shù)據(jù)量顯示。l 支持右鍵菜單l 支持跟蹤甘特圖l 無需安裝瀏覽器插件l 跨瀏覽器支持l 跨服務(wù)端平臺支持l 語言本地化資源甘特圖運行效果如何安裝1.下載運行ExtJS資源甘特圖控件是一個純表現(xiàn)層的組件產(chǎn)品。下面以ASP.NET工程項目為例，是為了讓您更方便、快速的掌握如何將ExtJS資源甘特圖控件與您的系統(tǒng)集成開發(fā)。使用JAVA開發(fā)和ASP.NET類似，這里不再敖述。 打開ASP.NET項目下載Web資源甘特圖+ ASP.NET工程實例下載后，將它解壓到某個文件夾下面，請用VS打開相應(yīng)的工程文件。運行示例點擊運行后，最終的運行結(jié)果如下圖所示。開發(fā)入門甘特圖控件的基本原理ExtJS資源甘特圖控件繼承至Extjs的GridPanel，如果你熟悉Extjs，那么使用Extjs資源甘特圖就非常的輕松；如果沒有，你需要花一點時間來先學習一下Extjs。ExtJS資源甘特圖控件按照MVC（模型、視圖、和控制器）的設(shè)計框架設(shè)計。 1. 模型層： 甘特圖的數(shù)據(jù)模型包括兩個方面，任務(wù)模型和依賴模型（任務(wù)之間的關(guān)聯(lián)關(guān)系）。相對應(yīng)的類有Ext.ux.maximgb.tg.AdjacencyListStore和Ext.data.Store，而前者繼承于后者。2. 界面顯示組件：我們主要使用這個GanttPanel類，只需要定義一些屬性就可以了。3. 控制器： 這個是由Extjs資源甘特圖內(nèi)部控制的，我們只需要在適當?shù)臅r候，相應(yīng)一些事件就可以定制我們自己的功能。GanttPanel是可視的組件，它用于界面顯示、編輯操作、用戶交互等功能。AdjacencyListStore和Ext.data.Store是不可見的數(shù)據(jù)組件，負責管理數(shù)據(jù)模型和數(shù)據(jù)操作。在dataStore上的所有數(shù)據(jù)操作，比如增、刪、改、過濾、排序等，都會被ExtJS甘特圖控件監(jiān)聽并更新界面。GanttPanel是由兩個重要的界面組件組成的：1. 左邊是數(shù)據(jù)表格或樹形表格組件， 繼承至Extjs的Datagrid。所以Datagrid的操作也可以運用于GanttPanel，就連API也是一樣的。2. 右邊是條形圖組件，這個是Extjs資源甘特圖控件特有的。如上圖所示，左側(cè)的是數(shù)據(jù)表格或樹形表格，右側(cè)是條形圖，他們組合起來就是一個標準的資源甘特圖。我們先帖出一個最簡單的，顯示一個甘特圖例子的完整代碼。讀者朋友可以對代碼有個基本的了解，然后在逐步分析各個部分的代碼。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我們寫程序的時候，大多數(shù)情況下，都只要去更新數(shù)據(jù)集中的數(shù)據(jù)。當我們修改了數(shù)據(jù)集中的數(shù)據(jù)甘特圖控件通過監(jiān)聽數(shù)據(jù)改變事件，更新自己的界面視圖， 負責更新表格數(shù)據(jù)操作，例如增加行、刪除行、修改單元格、移動、排序、過濾， 修改右邊圖表等操作?？紤]到部分讀者并不十分熟悉ExtJS，我們在附錄中附上了Extjs DataStore的入門指南，供大家參考。詳見附錄一。SchedulerPanelSchedulerPanel是我們要在網(wǎng)頁上顯示的可視化的類。 在定義SchedulerPanel的時候需要三個最基本的要素，資源的DataStore和資源甘特圖要顯示的列，如開始時間，結(jié)束時間等等。除了以上的基本功能，我們還可以在SchedulerPanel中定義不同的屬性，完成一些常見的擴展。例如自定義列、自定義單元格內(nèi)容、自定義單元格編輯器、根據(jù)權(quán)限控制編輯器，自定義條形圖外觀、監(jiān)聽處理拖拽事件。一個更加復雜的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), /時間刻度開始時間17. endDate : new Date(2011, 0, 1, 20), /時間刻度結(jié)束時間18. viewPreset: hourAndDay, /時間刻度顯示類型 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è)計大幅度的降低了數(shù)據(jù)之間的耦合關(guān)系，也更加接近于我們平時的數(shù)據(jù)庫設(shè)計，降低了和數(shù)據(jù)庫接口之間的難度。資源的數(shù)據(jù)結(jié)構(gòu)先看一個資源的數(shù)據(jù)結(jié)構(gòu)簡單的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. 一個資源可以有很多屬性，但是必須包括以下的數(shù)據(jù)，資源甘特圖才能夠顯示出來。l Id, 資源Idl Name, 資源名稱 事件的數(shù)據(jù)結(jié)構(gòu)事件的數(shù)據(jù)結(jié)構(gòu)非常簡單，只包括三個屬性l Id，事件Idl StartDate, 開始時間 l EndDate, 結(jié)束時間 以下是一個事件的數(shù)據(jù)結(jié)構(gòu)簡單的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的。 也就是說，甘特圖可以讀取靜態(tài)的JSON，或者是ASP.NET、Java等后端程序生成的JSON。除了JSON，Extjs甘特圖也支持更多的數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)格式。 事實上，用戶可以任意組織存儲自己的項目數(shù)據(jù)，無論是服務(wù)端是.NET還是JAVA，無論數(shù)據(jù)庫是ORACLE還是MYSQL，無論數(shù)據(jù)傳輸方式是JSON 還是XML， Web Service，Rest等等。Extjs自身提供的強大Datareader，可以滿足各種不同的需求。加載數(shù)據(jù)我們再來看看我們的DataStore是如何寫的。除了定義數(shù)據(jù)結(jié)構(gòu)以外，我們還定義了一個叫做Proxy的對象。1. var resourceStore = new Ext.data.JsonStore(2. proxy : 3. type : ajax,4. url : data.js,5. method：GET6. 7. ), 8. . 9. ); 在以上的例子中我們定義了一個HttpProxy， DataProxy 字面解釋就是數(shù)據(jù)代理，也可以理解為數(shù)據(jù)源，也即從哪兒或如何得到需要交給DataReader 解析的數(shù)據(jù)。數(shù)據(jù)代理（源）基類由Ext.data.DataProxy 定義，在DataProxy的基礎(chǔ)，ExtJS 提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三個分別用于從客戶端內(nèi)存數(shù)據(jù)、Ajax 讀取服務(wù)器端的數(shù)據(jù)及從跨域服務(wù)器中讀取數(shù)據(jù)等三種實現(xiàn)。在proxy的url，我們配置了data.js,也可以是一個任意的url地址，例如http:/localhost/text.jsp 或者http:/localhost/text.aspx 等等。而method則可以配置為get或者post等等。EventStore的配置和這里的類似，我們就不再贅述。保存數(shù)據(jù)實現(xiàn)增刪改查接口上一節(jié)我們講述了如何顯示甘特圖，當用戶增加刪除了一些任務(wù)，或者改變了任務(wù)之間的依賴關(guān)系，我們?nèi)绾螌⒏膭雍蟮臄?shù)據(jù)提交到服務(wù)器，在服務(wù)器中保存到數(shù)據(jù)庫或文件系統(tǒng)中呢？答案非常簡單，只要實現(xiàn)Data Store的四個接口（增刪改查）就可以了。我們先來看一段代碼。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. );在以上的代碼中，分別定義了四個不同的url，分別對應(yīng)著增刪改查四個操作的URL地址。例如，用戶修改了一個資源，甘特圖控件就會將修改后的數(shù)據(jù)提交到webservices/Tasks.asmx/Update。 其他的操作同理。下面我們以修改為例，看看在ASP.NET的服務(wù)器端是如何獲取修改后的數(shù)據(jù)的。ASP.NET后臺操作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在以上的例子中，我們建立一個Web Service來實現(xiàn)增刪改查，這個Web Servic里面有一個Update的方法。請注意在該方法的前面，有ScriptMethod這樣一個申明。 他說明這個Web Service提交的數(shù)據(jù)是一個JSON數(shù)據(jù)。函數(shù)Update的參數(shù)是一個jsonData，根據(jù)不同的業(yè)務(wù)邏輯，更新數(shù)據(jù)庫或文件系統(tǒng)。自定義資源甘特圖SchedulerPanel中默認的設(shè)置很難滿足客戶多變需求，我們就針對一些常用的擴展做一個說明。 一般最常用的需求是，自定義多列，自定義行，自定義單元格等等。下面我們就分別來說明。自定義列SchedulerPanel的列配置對象，描述了表頭、單元格、編輯器等重要配置。一般來說， 我們提供一個列配置對象，顯示了“序號”、“資源名稱”等比較典型的列。 但是有時我們會顯示更多的資源屬性，例如，資源的部門，職務(wù)，地點等等。自定義列非常簡單，只要在配置SchedulerPanel的列配置對象中多添加一個單元既可。見以下例子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. );運行后的軟件截圖如下自定義行自定義行的需求有很多，例如，在行中顯示不同的文字顏色，定義行的背景高亮顯示等等。 以下我們以在行中顯示不同的條形圖顏色為例，說明如何定義不同的行。關(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中添加了一個processed-row的類。下一步我們需要做的是在css中定義processed-row的樣式。1. 2. .processed-rowtd 3. color:red; 4. font-size:11px; 5. 6. 自定義單元格一個單元格的顯示內(nèi)容，取決于兩點：l dataIndex：如果配置了dataIndex，那么單元格默認顯示行對象的dataIndex屬性。l renderer：如果有單元格渲染器，那么單元格會忽略掉dataIndex的顯示功能，而只顯示從renderer函數(shù)返回的HTML字符串。其中，單元格渲染器函數(shù)renderer是最強大的單元格內(nèi)容顯示工具。通過renderer函數(shù)，您可以得知是哪一行、哪一列、單元格值，并且可以結(jié)合您系統(tǒng)的權(quán)限，返回不同的HTML內(nèi)容。返回的HTML內(nèi)容是任意的，可以是圖片、超鏈接、按鈕等。下面列舉一個簡單的例子。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:完成時間, 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. 單元格編輯器編輯時效果圖如下：編輯器只讀事件我們在平時的應(yīng)用中，經(jīng)常會控制甘特圖的編輯權(quán)限。 例如讓甘特圖為只讀或部分只讀?？刂普麄€甘特圖只讀非常簡單，只需要下面一行語句就能控制。1. gantt.setReadOnly(true); 在實際的應(yīng)用中，往往要控制甘特圖的某些行只讀或者是某一個單元格只讀，這時候我們需要編寫beforeedit回調(diào)函數(shù)了。請看下面的例子。1. listeners: 2. beforeedit:function(e) 3. if(e.record.get(other)=資源1) 4. returnfalse; 5. 6. 7. 這是一個beforeedit回調(diào)函數(shù)的簡單例子。 beforeedit回調(diào)函數(shù)會在用戶單擊單元格之后，用戶輸入內(nèi)容之前調(diào)用，如果返回false，則禁止在單元格中輸入內(nèi)容。自定義條形圖以上我們討論的自定義內(nèi)容都是對于左邊的樹形表格，Extjs甘特圖也提供各種機制自定義右邊的條形圖。以下我們討論的自定義，都是定義某一個或幾個任務(wù)的條形圖。自定義樣式基于條形圖的HTML結(jié)構(gòu)和樣式，通過修改樣式的邊框線、背景圖片和背景色，達到修改外觀的目的。GanttPanel提供一個eventRenderer回調(diào)函數(shù)， 該函數(shù)在渲染條形圖之前被調(diào)用，返回一個css樣式或者一個css類。以下的例子演示了，當任務(wù)的周期超過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甘特圖控件有很多提示框效果，當鼠標移上，或進行某些操作的時候，提供更多豐富的信息幫助用戶更好的操作。1. tooltipTpl:newExt.XTemplate( 2. ,3. 時間Ext.Date.format(values.StartDate, Y-m-d G:i),4. 任務(wù)Title,5. 地址Location ,6. 7. ).compile(),運行結(jié)果時間刻度和自定義甘特圖提供多種不同的時間刻度的定義，用戶也可以自定義自己的時間刻度。系統(tǒng)內(nèi)置的時間刻度包括以下六種:l hourAndDay 小時和天刻度l dayAndWeek 天和周刻度l weekAndDay 周和天刻度l weekAndMonth 周和月刻度l monthAndYear 月和年刻度l year 年刻度以下是自定義時間刻度的代碼。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. );高級應(yīng)用大數(shù)據(jù)量和性能優(yōu)化甘特圖所能支持的數(shù)據(jù)量，以及界面的渲染和操作性能，是衡量一個甘特圖組件是否符合項目需要的重要指標。 為了支持超過萬級超大數(shù)據(jù)量的甘特圖，Extjs提供一個數(shù)據(jù)緩沖視圖的解決方案。使用這個方案非常簡單，只需要在創(chuàng)建甘特圖的時候，加入以下代碼。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. );使用個數(shù)據(jù)緩沖視圖的Extjs甘特圖能支持10萬條以上的數(shù)據(jù)量。在我們的測試中，內(nèi)存開銷和性能體驗都非常好。附錄一 Extjs中的DataStore和甘特圖打交道，就不得不和DataStore打交道，甘特圖中的數(shù)據(jù)是存放類型為Store 的數(shù)據(jù)存儲器中，通過指定甘特圖中的store 屬性來設(shè)置表格中顯示的數(shù)據(jù)，通過調(diào)用store 的load 或reload方法可以重新加載表格中的數(shù)據(jù)。ExtJS 中用來定義控件中使用數(shù)據(jù)的API 位于Ext.Data 命名空間中，本附錄我們重點對ExtJS 中的數(shù)據(jù)存儲Store 進行介紹。Record首先需要明確是，ExtJS 中有一個名為Record 的類，表格等控件中使用的數(shù)據(jù)是存放在Record 對象中，一個Record 可以理解為關(guān)系數(shù)據(jù)表中的一行，也可以稱為記錄。Record 對象中即包含了記錄（行中各列）的定義信息（也就是該記錄包含哪些字段，每一個字段的數(shù)據(jù)類型等），同時又包含了記錄具體的數(shù)據(jù)信息（也就是各個字段的值）。我們來看直接使用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:日志標題, 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)建一個記錄集MyRecord，MyRecord 其實是一個類，該類包含了記錄集的定義信息，可以通過MyRecord 來創(chuàng)建包含字段值的Record 對