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也是一样的。
- 右边是条形图组件，这个是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甘特图免费版