Ext Gantt Web甘特图控件 >> Web甘特图文档_ext gantt pro 左边怎么显示列表-CSDN博客

本用户手册中文版是由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）主要描述资源的分配情况。例如项目组中有甲乙两个程序员（资源），甲周一、三做研发，乙周二到周五做研发。资源甘特图不描述资源之间的关系