Ext Gantt Web甘特图控件 >> Web甘特图文档

本用户手册中文版是由ExtJS甘特图控件中国代理商龙博中科软件有限公司组织编写的,希望能帮助正在学习或准备学习ExtJS甘特图控件的朋友们快速走进甘特图控件的精彩世界。

手册包括ExtJS甘特图的新手入门、组件体系结构及使用、ExtJS甘特图中各功能的使用方法及示例应用等,是一个非常适合新手的ExtJS甘特图入门手册。本手册主要是针对ExtJS甘特图1.8 进行介绍,全部代码、截图等都是基于ExtJS甘特图1.8。

最后,希望读者朋友把阅读本手册中的发现的错误、不足及建议等反馈给我们,我们会在下一版本中及时改正。下面让我们一起进入精彩的ExtJS甘特图世界吧

 

 

前言:本

extjs甘特图控件是基于extjs的最新版本构架的,如果你熟悉extjs的编程方式, 那么学习起来就非常容易;如果你以前没有接触过extjs,也没有关系,我们会教你一步一步的入门。

 

这是第一个网页甘特图程序,我们要完成以下功能
教学目标

1. 准备好网页甘特图数据

2. 在网页上显示一个最基本的甘特图

1. 准备数据

 

extjs甘特图可以接收xml、json、web服务等多种数据形式,下面以XML为例。

?
code
1
< TASKS >   < BR >< TASK >     < BR >< ID >1</ ID >     < BR >< NAME >计划任务</ NAME >     < BR >< STARTDATE >2010-01-18T00:00:00-08:00</ STARTDATE >     < ENDDATE >2010-02-02T00:00:00-08:00</ ENDDATE >     < BR >< PERCENTDONE >40</ PERCENTDONE >     < BR >< PARENTID >null</ PARENTID >     < BR >< ISLEAF >false</ ISLEAF >     < BR >< RESPONSIBLE ></ RESPONSIBLE >   < BR ></ TASK >   ... < BR ></ TASKS >

在以上的数据结构中, 包含了一个任务的id,名称,开始时间,结束时间等等。xml的tag名称不一定非得是id,name,因为我们可以在以下的程序中再做一次映射。

2. 引入甘特图需要的文件

要使用extjs网页甘特图控件需要引入以下文件。

?
code
1
2
3
4
5
6
7
8
9
10
11
12
<!--Ext and ux styles 样式文件 -->
< LINK rel = stylesheet type = text /css href = "../../../ext-min/resources/css/ext-all.css" >
< LINK rel = stylesheet type = text /css href = "../../../ext-min/examples/ux/css/LockingGridView.css" >
<!--Gantt styles 样式文件-->
< LINK rel = stylesheet type = text /css href = "../../css/sch-gantt-all.css" >
<!--Ext lib and UX components 程序问题-->
< SCRIPT type = text /javascript src = "../../../ext-min/adapter/ext/ext-base.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "../../../ext-min/ext-all-debug.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "../../../ext-min/examples/ux/LockingGridView.js" ></ SCRIPT >
<!--Gantt components 程序文件-->
< SCRIPT type = text /javascript src = "../../js/sch-gantt-base-debug.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "../../js/sch-gantt-all-debug.js" ></ SCRIPT >

这些文件看起来有点多,但是相互分离, 减少相互之间的耦合性。 你可以直接拷贝到html中的head块内。

3.编写代码

然后我们就可以开始编写代码了,我们首先需要定义一个xml的读取器。

?
code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var myreader = new Ext.data.XmlReader({
                 // records will have a 'Task' tag
                 record: 'Task' ,
                 idPath: "Id" ,
                 fields : [
                     //以下数据是必须的,并且要和xml中匹配
                     {name: 'Id' },
                     {name: 'Name' , type: 'string' },
                     {name: 'StartDate' , type : 'date' , dateFormat: 'c' },
                     {name: 'EndDate' , type : 'date' , dateFormat: 'c' },
                     {name: 'PercentDone' },
                     {name: 'ParentId' , type: 'auto' },
                     {name: 'IsLeaf' , type: 'bool' },
  
                     // 以下是任务的附加数据                    
                     {name: 'Responsible' }
                 ]
             })

基于以上的xml读取器,我们要定义一个store

?
code
1
2
3
4
5
6
7
8
9
10
11
var taskStore = new Ext.ux.maximgb.tg.AdjacencyListStore({
             defaultExpanded : true ,
             autoLoad : true ,
             proxy : new Ext.data.HttpProxy({
                 //我们需要到同级目录下的tasks.xml获取数据
                 url : 'tasks.xml' ,
                 method: 'GET'
             }),
             //这是上面定义的reader
             reader: myreader 
});

最后就是定义一个甘特图了, 我们只需要用new构造一个甘特图的对象。

?
code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var g = new Sch.gantt.GanttPanel({
             //甘特图显示在什么位置
             renderTo : Ext.getBody(),
             leftLabelField : 'Name' ,
             //定义甘特图中的开始时间和结束时间
             startDate : new Date(2010,0,4), 
             endDate : Sch.util.Date.add( new Date(2010,0,4), Sch.util.Date.WEEK, 20), 
             //定义时间刻度
             viewPreset : 'weekAndDayLetter' ,
             // 甘特图左边显示的列
             columns : [
                 {
                     header : 'Tasks'
                     sortable: true
                     dataIndex : 'Name'
                     locked : true ,
                     width:250, 
                     editor : new Ext.form.TextField()
                 }
             ],
             //刚才定义好的数据存取器
             taskStore : taskStore,
         });

这样,一个最基本的甘特图就做出来了。 最后的效果如以下所示。 它只是显示了任务(以列和图表的方式),但是并没有显示任务之间的关联关系,这个将会在下一节中讲述。

 

 

 

 

上个教程说到如何在网页中创建甘特图,以及如何在甘特图中显示任务(横道)。

这本教程主要教大家如何在网页甘特图上显示任务关联关系。 在extjs网页甘特图的设计的时候,就充分考虑了数据的解耦,所以任务和关联关系可以分别在不同的xml文件中存储(当然也可以在同一个xml文件中)。这也给我们后端的存储带来了很大的方便,例如在数据库中,我们的任务表和任务关系表分别保存在不同的数据表中。

我们还是以xml为例。 这时候我们需要准备关联关系的xml

?
code
1
2
3
4
5
6
7
8
< Links >
   < Link >
     < From >12</ From >
     < To >17</ To >
     < Type >2</ Type >
   </ Link >
   ...
</ LInks >

这个xml定义很简单,From是从哪个任务,To是到哪个任务,Type是指任务From和任务To的关系,包括完成-完成(FF) 0,完成-开始(FS) 1,开始-完成(SF) 2,开始-开始(SS) 3。

编写代码

和加载任务xml类似,我们也需要定义一个关联关系的store。

?
code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var dependencyStore = new Ext.data.Store({   
             autoLoad : true ,
             proxy : new Ext.data.HttpProxy({
                 //关联关系的xml
                 url : 'dependencies.xml' ,
                 method: 'GET'
             }),
             reader: new Ext.data.XmlReader({
                 // 记录有一个'Link' 标签
                 record: 'Link' ,
                 fields : [
                     // 3 个必填项
                     {name: 'From' },
                     {name: 'To' },
                     {name: 'Type' , type : 'int' }
                 ]
             })
         });

最后我们在创建甘特图的代码中指定甘特图的关联关系的store

?
code
1
2
3
4
5
6
var g = new Sch.gantt.GanttPanel({
             height : 600,
             width: 1000,
             ...
             dependencyStore : dependencyStore
});

大功告成。一个基本的甘特图就完成了。

 

 

 

我们在甘特图中显示任务树(甘特图中的左边部分)的时候,除了显示任务的标题,开始时间,结束时间,百分比等常规属性以外,还可以显示任意的自定义属性,例如,分配给某人, 主管领导等等。 本教程教你如何一步一步的添加额外的属性列。

还是以xml文件为例。 首先我们要准备数据, 这个数据一般就放在任务的xml中。

?
code
1
2
3
4
5
6
7
8
9
10
11
12
< Tasks >
   < Task >
     < Id >1</ Id >
     < Name >Planning</ Name >
     < StartDate >2010-01-18T00:00:00-08:00</ StartDate >
     < EndDate >2010-02-02T00:00:00-08:00</ EndDate >
     < PercentDone >40</ PercentDone >
     < ParentId >null</ ParentId >
     < IsLeaf >false</ IsLeaf >
     < Responsible >王局长</ Responsible >
   </ Task >
</ Tasks >

在以上的xml文件中,我们在每一个任务中添加一个属性Responsible(主管领导)。

 

 

 

 

 

甘特图Ext Gantt和资源甘特图Ext Scheduler区别有哪些?

甘特图(Ext Gantt)和资源甘特图(Ext Scheduler)区别有哪些?

甘特图(Ext Gantt)和资源甘特图(Ext Scheduler)是独立的控件。
甘特图主要描述组成项目的任务,以及任务之间的关系(依赖性)。控件中中的每一行代表且仅代表一个任务。
资源甘特图(Ext Scheduler)主要描述资源的分配情况。 例如项目组中有甲乙两个程序员(资源), 甲周一、三做研发, 乙周二到周五做研发。 资源甘特图不描述资源之间的关系

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值