Ext Gantt Web--自定义条形图

以上我们讨论的自定义内容都是对于左边的树形表格，Extjs甘特图也提供各种机制自定义右边的条形图。以下我们讨论的自定义，都是定义某一个或几个任务的条形图。要自定义整个甘特图的风格，请参看高级应用中的《皮肤和主题》。

自定义样式

基于条形图的HTML结构和样式，通过修改样式的边框线、背景图片和背景色，达到修改外观的目的。

GanttPanel提供一个eventRenderer 回调函数， 该函数在渲染条形图之前被调用，返回一个css样式或者一个css类。以下的例子演示了，当任务的周期超过7天，条形图高亮（背景变为红色）。

1.       eventRenderer : function (r) {   

2.           if (Sch.util.Date.getDurationInDays(r.get('StartDate'), r.get('EndDate')) > 7) {   

3.               return {   

4.                   style : 'background-color:red', //条形图的样式   

5.                   cls   : "myclass"//条形图的css类

6.               };   

7.           }   

8.       }  

 

条形图前后的标签

  条形图前后的标签可以按照以下的方法定义。

1.       // 左边只定义显示任务名字，不能编辑   

2.       leftLabelField : 'Name',   

3.       // 要显示的数据列和编辑控件  

4.       rightLabelField : {   

5.           dataIndex : 'AssignedResources',   //展示分配的资源

6.           editor : staffCombo,   //使用一个下拉框编辑

7.           renderer : Ext.util.Format.multiComboRenderer(staffCombo)  //渲染函数 

8.       }  

以上的例子运行后的截图如下图所示。