Extjs甘特图的基本原理

2019独角兽企业重金招聘Python工程师标准>>>

甘特图控件的基本原理

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甘特图免费版

转载于:https://my.oschina.net/u/180932/blog/41966