zoukankan      html  css  js  c++  java
  • 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.       }  

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

     

     

  • 相关阅读:
    网页简单布局之结构与表现原则(HTML/CSS)
    浅谈搜索引擎SEO(HTML/CSS)
    Vue小案例(一)
    vue2.0中的计算属性
    Vue.js双向绑定原理
    Vue实例对象的数据选项(火柴)
    基于Vue的WebApp项目开发(六)
    基于Vue的WebApp项目开发(五)
    基于Vue的WebApp项目开发(四)
    基于Vue的WebApp项目开发(三)
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/2675114.html
Copyright © 2011-2022 走看看