摘要:
ExtJS甘特图控件有很多提示框效果,当鼠标移上,或进行某些操作的时候,提供更多丰富的信息帮助用户更好的操作。1. tooltipTpl:newExt.XTemplate( 2. '<h4class="tipHeader">{Name}</h4>', 3. '<tableclass="taskTip">', 4. '<tr><td>开始时间:</td><tdalign="right">{[values.Start 阅读全文
摘要:
以上我们讨论的自定义内容都是对于左边的树形表格,Extjs甘特图也提供各种机制自定义右边的条形图。以下我们讨论的自定义,都是定义某一个或几个任务的条形图。要自定义整个甘特图的风格,请参看高级应用中的《皮肤和主题》。自定义样式基于条形图的HTML结构和样式,通过修改样式的边框线、背景图片和背景色,达到修改外观的目的。GanttPanel提供一个eventRenderer回调函数, 该函数在渲染条形图之前被调用,返回一个css样式或者一个css类。以下的例子演示了,当任务的周期超过7天,条形图高亮(背景变为红色)。1. eventRenderer:function(r){ 2. if(Sch.ut 阅读全文
摘要:
GanttPanel中默认的设置很难满足客户多变需求,我们就针对一些常用的扩展做一个说明。 一般最常用的需求是,自定义多列,自定义行,自定义单元格等等。下面我们就分别来说明。自定义列GanttPanel的列配置对象,描述了表头、单元格、编辑器等重要配置。一般来说, 我们提供一个列配置对象,显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。 但是有时我们会显示更多的任务属性,例如,任务的部门,负责人,地点等等。自定义列非常简单,只要在配置GanttPanel的列配置对象中多添加一个单元既可。见以下例子1. varg=newSch.gantt.GanttPanel( 阅读全文
摘要:
甘特图的数据结构分为两部分,任务的数据和任务依赖关系的数据。这种设计大幅度的降低了数据之间的耦合关系,也更加接近于我们平时的数据库设计,降低了和数据库接口之间的难度。任务的数据结构 先看一个任务的数据结构简单的XML的例子。1. <Tasks>2. <Task>3. <Id>1</Id>4. <Name>Planning</Name>5. <StartDate>2010-01-18T00:00:00-08:00</StartDate>6. <EndDate>2010-02-02T00:0 阅读全文
摘要:
和甘特图打交道,就不得不和DataStore打交道,甘特图中的数据是存放类型为Store 的数据存储器中,通过指定甘特图中的store 属性来设置表格中显示的数据,通过调用store 的load 或reload方法可以重新加载表格中的数据。ExtJS 中用来定义控件中使用数据的API 位于Ext.Data 命名空间中,本附录我们重点对ExtJS 中的数据存储Store 进行介绍。Record首先需要明确是,ExtJS 中有一个名为Record 的类,表格等控件中使用的数据是存放在Record 对象中,一个Record 可以理解为关系数据表中的一行,也可以称为记录。Record 对象中即包含了记 阅读全文