Ext Gantt Web甘特图--自定义任务树
GanttPanel中默认的设置很难满足客户多变需求，我们就针对一些常用的扩展做一个说明。
一般最常用的需求是，自定义多列，自定义行，自定义单元格等等。下面我们就分别来说明。
自定义列
GanttPanel的列配置对象，描述了表头、单元格、编辑器等重要配置。一般来说， 我们提供一个列配置对象，显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。 但是有时我们会显示更多的任务属性，例如，任务的部门，负责人，地点等等。
自定义列非常简单，只要在配置GanttPanel的列配置对象中多添加一个单元既可。见以下例子
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. });
运行后的软件截图如下
自定义行
自定义行的需求有很多，例如，在行中显示不同的文字颜色，定义行的背景高亮显示等等。 以下我们以在行中显示不同的文字颜色为例，说明如何定义不同的行。
关于行的配置，我们一般在viewConfig中配置。 viewConfig有一个回调函数叫做getRowClass，我们这个回调函数中返回整行的css类。具体代码如下。
1. viewConfig: {
2. getRowClass: function(r, idx, rowParams, ds) {
3. if (Sch.util.Date.getDurationInDays(r.get('StartDate'), r.get('EndDate')) > 7 && r.get('IsLeaf')) {
4. return 'processed-row';
5. }
6. }
7. },
以上的代码将任务时间超过7天的任务行的tr中添加了一个processed-row的类。下一步我们需要做的是在css中定义processed-row的样式。
1. <style type="text/css">
2. .processed-row td{
3. color: red;
4. font-size:11px;
5. }
6. </style>
任务时间超过7天的任务行就会以字体11px，红色显示。
自定义单元格
一个单元格的显示内容，取决于两点：
l dataIndex：如果配置了dataIndex，那么单元格默认显示行对象的dataIndex属性。
l renderer：如果有单元格渲染器，那么单元格会忽略掉dataIndex的显示功能，而只显示从renderer函数返回的HTML字符串。
其中，单元格渲染器函数renderer是最强大的单元格内容显示工具。通过renderer函数，您可以得知是哪一行、哪一列、单元格值，并且可以结合您系统的权限，返回不同的HTML内容。返回的HTML内容是任意的，可以是图片、超链接、按钮等。下面列举一个简单的例子。
1. {
2. header : '工期',
3. sortable:true,
4. width:50,
5. dataIndex : 'Duration',
6. renderer: function(v, m, r) {
7. var start = r.get('StartDate'),
8. end = r.get('EndDate');
9. if (start && end) {
10. var d = Math.round(Sch.util.Date.getDurationInDays(start, end));
11. if (d > 0) {
12. return d + '天';
13. }
14. }
15. },
16. locked : true,
17. },
自定义编辑器
如果需要快速编辑数据，就需要使用单元格编辑器。使用单元格编辑器的代码如下：
1. {
2. header : '完成时间',
3. sortable:true,
4. width:90,
5. dataIndex : 'StartDate',
6. locked : true,
7. editor : new Ext.form.DateField({
8. allowBlank : false,
9. format: 'Y/m/d'
10. })
11. }
单元格编辑器编辑时效果图如下：
编辑器只读事件
我们在平时的应用中，经常会控制甘特图的编辑权限。例如让甘特图为只读或部分只读。
控制整个甘特图只读非常简单，只需要下面一行语句就能控制。
1. gantt.setReadOnly(true);
在实际的应用中，往往要控制甘特图的某些行只读或者是某一个单元格只读，这时候我们需要编写beforeedit回调函数了。请看下面的例子。
1. listeners : {
2. beforeedit : function(e) {
3. if(e.record.get('PercentDone')>20){
4. return false;
5. }
6. }
7. }
这是一个beforeedit回调函数的简单例子。 beforeedit回调函数会在用户单击单元格之后，用户输入内容之前调用，如果返回false，则禁止在单元格中输入内容。 在以上的例子中， 任务完成百分比大于20%的任务都不能编辑。