以上我们讨论的自定义内容都是对于左边的树形表格，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. }
以上的例子运行后的截图如下图所示。
