Extjs 甘特图教程之自定义任务树

Extjs 甘特图自定义任务树

       Extjs 甘特图GanttPanel中默认的设置很难满足客户多变需求，我们就针对一些常用的扩展做一个说明。 

      一般最常用的需求是，自定义多列，自定义行，自定义单元格等等。下面我们就分别来说明。

Extjs 甘特图自定义列

Extjs 甘特图GanttPanel的列配置对象，描述了表头、单元格、编辑器等重要配置。一般来说， 我们提供一个列配置对象，显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。 但是有时我们会显示更多的任务属性，例如，任务的部门，负责人，地点等等。

Extjs 甘特图自定义列非常简单，只要在配置GanttPanel的列配置对象中多添加一个单元既可。见以下Extjs 甘特图例子

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

2.                   // Setup your static columns   

3.                   columns : [   

4.                       {   

5.                           header : 'Tasks',    

6.                           sortable:true,    

7.                           dataIndex : 'Name',    

8.                           locked : true,   

9.                           width:250,    

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

11.                   },{   

12.                       header : '更多列1',    

13.                       sortable:true,    

14.                       width:50,    

15.                       dataIndex : 'Other1',    

16.                       locked : true  

17.                   }   

18.               ],   

19.     

20.               taskStore : taskStore,   

21.               dependencyStore : dependencyStore   

22.   });  

Extjs 甘特图运行后的软件截图如下