Extjs甘特圖的基本原理

甘特圖控件的基本原理

ExtJS甘特圖控件繼承至Extjs的GridPanel，若是你熟悉Extjs，那麼使用Extjs甘特圖就很是的輕鬆；若是沒有，你須要花一點時間來先學習一下Extjs。ExtJS甘特圖控件按照MVC（模型、視圖、和控制器）的設計框架設計。 

1.     模型層： 甘特圖的數據模型包括兩個方面，任務模型和依賴模型（任務之間的關聯關係）。相對應的類有Ext.ux.maximgb.tg.AdjacencyListStore和Ext.data.Store，而前者繼承於後者。

2.     界面顯示組件：咱們主要使用這個GanttPanel類，只須要定義一些屬性就能夠了。

3.     控制器： 這個是由Extjs甘特圖內部控制的，咱們只須要在適當的時候，相應一些事件就能夠定製咱們本身的功能。

 

 

1.     左邊是樹形表格組件， 繼承至Extjs的Datagrid。因此Datagrid的操做也能夠運用於GanttPanel，就連API也是同樣的。

1. 右邊是條形圖組件，這個是Extjs甘特圖控件特有的。

 

如上圖所示，左側的是樹形表格，右側是條形圖，他們組合起來就是一個標準的甘特圖。

咱們先帖出一個最簡單的，顯示一個甘特圖例子的完整代碼。

1.       //定義任務節點的數據模型   

2.               var taskStore = new Ext.ux.maximgb.tg.AdjacencyListStore({   

3.                   proxy: new Ext.data.HttpProxy({   

4.                       //tasks.xml中包含有咱們任務數據   

5.                       url: 'tasks.xml',   

6.                       method: 'GET'  

7.                   }),   

8.                   reader: new Ext.data.XmlReader({   

9.                         

10.                   record: 'Task',   

11.                   idPath: "Id",   

12.                   fields: [   

13.                   //如下字段爲必須的   

14.                       {name: 'Id' },   

15.                       { name: 'Name', type: 'string' },//任務名稱   

16.                       { name: 'StartDate', type: 'date', dateFormat: 'c' },//開始時間   

17.                       { name: 'EndDate', type: 'date', dateFormat: 'c' },//結束時間   

18.                       { name: 'PercentDone' },//完成的百分比   

19.                       { name: 'ParentId', type: 'auto' },//父任務   

20.                       { name: 'IsLeaf', type: 'bool' },//是不是葉節點   

21.     

22.                   //你能夠增長其餘字段。   

23.                       {name: 'Responsible' }   

24.                   ]   

25.               })   

26.           });   

27.           //定義依賴的數據模型   

28.           var dependencyStore = new Ext.data.Store({   

29.               autoLoad: true,   

30.               proxy: new Ext.data.HttpProxy({   

31.                   url: 'dependencies.xml',   

32.                   method: 'GET'  

33.               }),   

34.               reader: new Ext.data.XmlReader({   

35.                   // records will have a 'Task' tag   

36.                   record: 'Link',   

37.                   fields: [   

38.                   // 如下字段爲必須的   

39.                       {name: 'From' },//被依賴節點   

40.                       { name: 'To' },//依賴節點   

41.                       { name: 'Type', type: 'int' }//依賴類型,SS,SF,FS,FF   

42.                   ]   

43.               })   

44.           });   

45.     

46.          //定義甘特圖   

47.          var g = new Sch.gantt.GanttPanel({   

48.               columns : [   

49.                   {   

50.                       header : 'Tasks',    

51.                       sortable:true,    

52.                       dataIndex : 'Name',    

53.                       locked : true,   

54.                       width:250,    

55.                       editor : new Ext.form.TextField()   

56.                   }   

57.               ],   

58.     

59.               taskStore : taskStore,   

60.               dependencyStore: dependencyStore   

          });  

 點擊下載Extjs甘特圖免費版