Extjs甘特图教程.docVIP

Extjs甘特图教程        GanttPanel中默认的设置很难满足客户多变需求，我们就针对一些常用的扩展做一个说明。        一般最常用的需求是，自定义多列，自定义行，自定义单元格等等。下面我们就分别来说明。 Extjs甘特图自定义列 GanttPanel的列配置对象，描述了表头、单元格、编辑器等重要配置。一般来说， 我们提供一个列配置对象，显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。 但是有时我们会显示更多的任务属性，例如，任务的部门，负责人，地点等等。 Extjs甘特图自定义列非常简单，只要在配置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.   });   Extjs甘特图运行后的软件截图如下 自定义行Extjs甘特图 Extjs甘特图自定义行的需求有很多，例如，在行中显示不同的文字颜色，定义行的背景高亮显示等等。 以下我们以在行中显示不同的文字颜色为例，说明如何定义不同的行。 关于行的配置，我们一般在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，红色显示。