Ext Gantt Web甘特图--高级应用

甘特图所能支持的数据量,以及界面的渲染和操作性能,是衡量一个甘特图组件是否符合项目需要的重要指标。

为了支持超过万级超大数据量的甘特图,Extjs提供一个数据缓冲视图的解决方案。使用这个方案非常简单,只需要在创建甘特图的时候,加入以下代码。

 

1.       var g = new Sch.gantt.GanttPanel({   

2.                      

3.                   view : new Sch.gantt.BufferedGanttView({   

4.                       scrollDelay : false  

5.                   }),   

6.                   taskStore : store,   

7.                   dependencyStore : dependencyStore,   

8.               });   

 

使用个数据缓冲视图的Extjs甘特图能支持10万条以上的数据量。在我们的测试中,内存开销和性能体验都非常好。

皮肤和主题

如果你不想让你的应用千人一面,那么Extjs甘特图提供的“皮肤和主题”功能就非常有必要了。Extjs甘特图提供三种不同风格的皮肤和样式,你也可以在美工的配合下自定义自己的皮肤和主题。

自定义主题1

 

自定义主题2

 

自定义主题3

以下的代码展示了通过CSS更改样式的多种方法。点击工具栏按钮更改样式。

1.       var g = new Sch.gantt.GanttPanel({   

2.          ...   

3.       });   

4.       handler : function() {   

5.           g.el.removeClass(['style2', 'style3']).addClass('style1');   

6.           g.view.refresh();   

7.       }  

别忘记调用view.refresh()来刷新视图

时间: 2024-07-28 14:30:51

Ext Gantt Web甘特图--高级应用的相关文章

Ext Gantt Web甘特图--DataStore

和甘特图打交道,就不得不和DataStore打交道,甘特图中的数据是存放类型为Store 的数据存储器中,通过指定甘特图中的store 属性来设置表格中显示的数据,通过调用store 的load 或reload方法可以重新加载表格中的数据.ExtJS 中用来定义控件中使用数据的API 位于Ext.Data 命名空间中,本附录我们重点对ExtJS 中的数据存储Store 进行介绍. Record 首先需要明确是,ExtJS 中有一个名为Record 的类,表格等控件中使用的数据是存放在Record

Ext Gantt Web甘特图--自定义任务树

  GanttPanel中默认的设置很难满足客户多变需求,我们就针对一些常用的扩展做一个说明.       一般最常用的需求是,自定义多列,自定义行,自定义单元格等等.下面我们就分别来说明. 自定义列 GanttPanel的列配置对象,描述了表头.单元格.编辑器等重要配置.一般来说, 我们提供一个列配置对象,显示了"序号"."任务名称"."开始日期"."完成日期"."进度"等比较典型的列. 但是有时我们会显

Ext Gantt Web甘特图--自定义提示框

ExtJS甘特图控件有很多提示框效果,当鼠标移上,或进行某些操作的时候,提供更多丰富的信息帮助用户更好的操作. 1.       tooltipTpl : new Ext.XTemplate(    2.           '<h4 class="tipHeader">{Name}</h4>',    3.           '<table class="taskTip">',     4.           '<tr

Ext Gantt Web甘特图--时间刻度和自定义

甘特图提供多种不同的时间刻度的定义,用户也可以自定义自己的时间刻度.系统内置的时间刻度包括以下六种: 1       hourAndDay 小时和天刻度 2       dayAndWeek 天和周刻度 3       weekAndDay 周和天刻度 4       weekAndMonth 周和月刻度 5       monthAndYear 月和年刻度 6       year 年刻度 以下是自定义时间刻度的代码. 1.       Sch.PresetManager.registerPr

Ext Gantt Web--自定义条形图

以上我们讨论的自定义内容都是对于左边的树形表格,Extjs甘特图也提供各种机制自定义右边的条形图.以下我们讨论的自定义,都是定义某一个或几个任务的条形图.要自定义整个甘特图的风格,请参看高级应用中的<皮肤和主题>. 自定义样式 基于条形图的HTML结构和样式,通过修改样式的边框线.背景图片和背景色,达到修改外观的目的. GanttPanel提供一个eventRenderer 回调函数, 该函数在渲染条形图之前被调用,返回一个css样式或者一个css类.以下的例子演示了,当任务的周期超过7天,条

在Excel2010中绘制简单的甘特图

甘特图(Gantt Chart)又称横道图,它通过图示形象地表示特定项目的活动顺序与持续时间.在Excel 2003中,可用用自定义图表类型中的"悬浮的条形图"来快速绘制简单的甘特图,而在Excel 2007/2010中,没有现成的自定义图表类型可用,但通过堆积条形图同样可以轻松实现.下面以Excel 2010为例来说明绘制步骤,Excel 2007中的制作步骤类似,示例文件可在文章结尾处下载. 上图A列为某工程一些项目代号,B至D列为"开始日期"."天数

Excel2010甘特图绘制方法

  甘特图(Gantt Chart)又称横道图,它通过图示形象地表示特定项目的活动顺序与持续时间.在Excel 2003中,可用用自定义图表类型中的"悬浮的条形图"来快速绘制简单的甘特图,而在Excel 2007/2010中,没有现成的自定义图表类型可用,但通过堆积条形图同样可以轻松实现. 如果目前该工程正在进行中,可在B11单元格中输入当前日期,如公式: 添加辅助列 1.在数据区域原C列左侧插入两列,分别表示以B11单元格中日期为当前进度的各项目已完成和未完成的天数.如图所示,插入两

Excel 2007绘制甘特图查看项目安排情况

  在Excel 2007中使用图表来进行分析数据,通常大家会选择使用较常见的图表类型,比如图柱.还有一个类型更能体现出表格中的数据,那就是甘特图,也是一种线条图,非常适合用在工程进度的数据上. 下面的过程可帮助在Excel2007中创建甘特图(Gantt Chart).对于此图表,我们使用示例工作表数据.您可以将这些数据复制到工作表中,也可以使用自己的数据,只要使用的列标题和工作表结构是相同的. 将示例工作表数据复制到一个空白工作表中,或者打开包含要绘制到甘特图中的数据的工作表; 工作表数据

[求助]请教Sharepoint2010 甘特图的自定义设置方式

问题描述 第一次使用Sharepoint2010,有个问题困扰了我一周,只能请教各位,主要想达到以下目的:1.标题.日期.人员等项目不可以在甘特图视图下直接编辑,而是通过点击链接打开窗口后编辑:2.可以在默认视图下自定义列宽并固定下来,虽然通过配置列来调整宽度,但是刷新后就复原了:3.可以自定义任务和甘特图所占窗口的比例:另外,我在项目任务的甘特图视图下点击修改视图---在SharepointDesigner编辑(高级),打开后提示"没有设计时间呈现",这个怎么解决呢?难道是用错工具了