資源甘特圖教程

《資源甘特圖教程》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、ExtJS資源甘特圖序言3簡介4ExtJS資源甘特圖功能特性4資源甘特圖運(yùn)行效果5如何安裝61.下載運(yùn)行6打開ASP.NET項目6運(yùn)行示例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實(shí)現(xiàn)增刪改查接口16ASP.NET后臺操作17自定義資源甘特圖18自定義列18自定義行19自定義單元格20自定義編輯器21編輯器只讀事件22自定義條形圖23自定義樣式23自定義提示框24時間刻度和自定義25高級應(yīng)用28大數(shù)據(jù)量和性能優(yōu)化28附錄一Extjs中的DataStore29Record29S

2、tore30DataReader331）ArrayReader332）JsonReader343）XmlReader35DataProxy和自定義Store36序言手冊包括ExtJS資源甘特圖的新手入門、組件體系結(jié)構(gòu)及使用、ExtJS資源甘特圖中各功能的使用方法及示例應(yīng)用等，是一個非常適合新手的ExtJS資源甘特圖入門手冊。本手冊主要是針對ExtJS資源甘特圖2.0進(jìn)行介紹，全部代碼、截圖等都是基于ExtJS資源甘特圖2.0。簡介資源甘特圖又叫負(fù)荷圖，其縱軸不再列出活動，而是列出整個部門或特定的資源。ExtScheduler資源甘特圖是基于Extjs核心庫的開發(fā)的，基于WEB瀏覽器的甘特圖解

3、決方案?？蓱?yīng)用于生產(chǎn)能力進(jìn)行計劃和控制系統(tǒng)等的開發(fā)。和ExtGantt甘特圖一樣，ExtScheduler資源甘特圖可與任意后端代碼（.net,jsp）集成為jsp資源甘特圖，asp.net資源甘特圖等。ExtJS資源甘特圖功能特性ExtJS資源甘特圖是使用Javascript開發(fā)的、基于WEB瀏覽器的甘特圖解決方案，具備如下特點(diǎn)：l可拖拽調(diào)節(jié)條形圖l豐富的時間線刻度：支持年/月、周/日、周/時、日/時等，用戶也可以自定義時間線模式。l自定義列。l卓越的性能和大數(shù)據(jù)量支持l懶加載顯示：通過分級加載模式，能支持超大數(shù)據(jù)量顯示。l支持右鍵菜單l支持跟蹤甘特圖l無需安裝瀏覽器插件l跨瀏覽器支持l跨

4、服務(wù)端平臺支持l語言本地化資源甘特圖運(yùn)行效果如何安裝1.下載運(yùn)行ExtJS資源甘特圖控件是一個純表現(xiàn)層的組件產(chǎn)品。下面以ASP.NET工程項目為例，是為了讓您更方便、快速的掌握如何將ExtJS資源甘特圖控件與您的系統(tǒng)集成開發(fā)。使用JAVA開發(fā)和ASP.NET類似，這里不再敖述。打開ASP.NET項目下載《Web資源甘特圖+ASP.NET工程實(shí)例下載》后，將它解壓到某個文件夾下面，請用VS打開相應(yīng)的工程文件。運(yùn)行示例點(diǎn)擊運(yùn)行后，最終的運(yùn)行結(jié)果如下圖所示。開發(fā)入門甘特圖控件的基本原理ExtJS資源甘特圖控件繼承至Extjs的GridPanel，如果你熟悉Extjs，那么使用Extjs資源甘特圖就

5、非常的輕松；如果沒有，你需要花一點(diǎn)時間來先學(xué)習(xí)一下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)部控制的，我們只需要在適當(dāng)?shù)臅r候，相應(yīng)一些事件就可以定制我們自己的功能。GanttPanel是可視的組件，它用于界面

6、顯示、編輯操作、用戶交互等功能。AdjacencyListStore和Ext.data.Store是不可見的數(shù)據(jù)組件，負(fù)責(zé)管理數(shù)據(jù)模型和數(shù)據(jù)操作。在dataStore上的所有數(shù)據(jù)操作，比如增、刪、改、過濾、排序等，都會被ExtJS甘特圖控件監(jiān)聽并更新界面。GanttPanel是由兩個重要的界面組件組成的：1.左邊是數(shù)據(jù)表格或樹形表格組件，繼承至Extjs的Datagrid。所以Datagrid的操作也可以運(yùn)用于GanttPanel，就連API也是一樣的。2.右邊是條形圖組件，這個是Extjs資源甘特圖控件特有的。如上圖所示，左側(cè)的是數(shù)據(jù)表格或樹形表格，右側(cè)是條形圖，他們組合起來就是一個標(biāo)準(zhǔn)的

7、資源甘特圖。我們先帖出一個最簡單的，顯示一個甘特圖例子的完整代碼。讀者朋友可以對代碼有個基本的了解，然后在逐步分析各個部分的代碼。1.//定義資源的數(shù)據(jù)模型??2.???????varresourceStore=newExt.data.JsonStore({3.proxy:{4.type:'ajax',5.//data.js中包含資源數(shù)據(jù)6.url:'data.js',7.reader:{8.type:'js