Ext Gantt Web甘特图控件 >> Web甘特图文档
2012-04-04 21:33
274 查看
本用户手册中文版是由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
在以上的数据结构中, 包含了一个任务的id,名称,开始时间,结束时间等等。xml的tag名称不一定非得是id,name,因为我们可以在以下的程序中再做一次映射。
2. 引入甘特图需要的文件
要使用extjs网页甘特图控件需要引入以下文件。
?
code
这些文件看起来有点多,但是相互分离, 减少相互之间的耦合性。 你可以直接拷贝到html中的head块内。
3.编写代码
然后我们就可以开始编写代码了,我们首先需要定义一个xml的读取器。
?
code
基于以上的xml读取器,我们要定义一个store
?
code
最后就是定义一个甘特图了, 我们只需要用new构造一个甘特图的对象。
?
code
这样,一个最基本的甘特图就做出来了。 最后的效果如以下所示。 它只是显示了任务(以列和图表的方式),但是并没有显示任务之间的关联关系,这个将会在下一节中讲述。
上个教程说到如何在网页中创建甘特图,以及如何在甘特图中显示任务(横道)。
这本教程主要教大家如何在网页甘特图上显示任务关联关系。 在extjs网页甘特图的设计的时候,就充分考虑了数据的解耦,所以任务和关联关系可以分别在不同的xml文件中存储(当然也可以在同一个xml文件中)。这也给我们后端的存储带来了很大的方便,例如在数据库中,我们的任务表和任务关系表分别保存在不同的数据表中。
我们还是以xml为例。 这时候我们需要准备关联关系的xml
?
code
这个xml定义很简单,From是从哪个任务,To是到哪个任务,Type是指任务From和任务To的关系,包括完成-完成(FF) 0,完成-开始(FS) 1,开始-完成(SF) 2,开始-开始(SS) 3。
编写代码
和加载任务xml类似,我们也需要定义一个关联关系的store。
?
code
最后我们在创建甘特图的代码中指定甘特图的关联关系的store
?
code
大功告成。一个基本的甘特图就完成了。
我们在甘特图中显示任务树(甘特图中的左边部分)的时候,除了显示任务的标题,开始时间,结束时间,百分比等常规属性以外,还可以显示任意的自定义属性,例如,分配给某人, 主管领导等等。 本教程教你如何一步一步的添加额外的属性列。
还是以xml文件为例。 首先我们要准备数据, 这个数据一般就放在任务的xml中。
?
code
在以上的xml文件中,我们在每一个任务中添加一个属性Responsible(主管领导)。
甘特图(Ext Gantt)和资源甘特图(Ext Scheduler)是独立的控件。
甘特图主要描述组成项目的任务,以及任务之间的关系(依赖性)。控件中中的每一行代表且仅代表一个任务。
资源甘特图(Ext Scheduler)主要描述资源的分配情况。 例如项目组中有甲乙两个程序员(资源), 甲周一、三做研发, 乙周二到周五做研发。 资源甘特图不描述资源之间的关系
手册包括ExtJS甘特图的新手入门、组件体系结构及使用、ExtJS甘特图中各功能的使用方法及示例应用等,是一个非常适合新手的ExtJS甘特图入门手册。本手册主要是针对ExtJS甘特图1.8 进行介绍,全部代码、截图等都是基于ExtJS甘特图1.8。
最后,希望读者朋友把阅读本手册中的发现的错误、不足及建议等反馈给我们,我们会在下一版本中及时改正。下面让我们一起进入精彩的ExtJS甘特图世界吧
前言:本
extjs甘特图控件是基于extjs的最新版本构架的,如果你熟悉extjs的编程方式, 那么学习起来就非常容易;如果你以前没有接触过extjs,也没有关系,我们会教你一步一步的入门。
这是第一个网页甘特图程序,我们要完成以下功能
教学目标
1. 准备好网页甘特图数据
2. 在网页上显示一个最基本的甘特图
1. 准备数据
extjs甘特图可以接收xml、json、web服务等多种数据形式,下面以XML为例。
?
2. 引入甘特图需要的文件
要使用extjs网页甘特图控件需要引入以下文件。
?
3.编写代码
然后我们就可以开始编写代码了,我们首先需要定义一个xml的读取器。
?
?
?
上个教程说到如何在网页中创建甘特图,以及如何在甘特图中显示任务(横道)。
这本教程主要教大家如何在网页甘特图上显示任务关联关系。 在extjs网页甘特图的设计的时候,就充分考虑了数据的解耦,所以任务和关联关系可以分别在不同的xml文件中存储(当然也可以在同一个xml文件中)。这也给我们后端的存储带来了很大的方便,例如在数据库中,我们的任务表和任务关系表分别保存在不同的数据表中。
我们还是以xml为例。 这时候我们需要准备关联关系的xml
?
编写代码
和加载任务xml类似,我们也需要定义一个关联关系的store。
?
?
我们在甘特图中显示任务树(甘特图中的左边部分)的时候,除了显示任务的标题,开始时间,结束时间,百分比等常规属性以外,还可以显示任意的自定义属性,例如,分配给某人, 主管领导等等。 本教程教你如何一步一步的添加额外的属性列。
还是以xml文件为例。 首先我们要准备数据, 这个数据一般就放在任务的xml中。
?
甘特图Ext Gantt和资源甘特图Ext Scheduler区别有哪些?
甘特图(Ext Gantt)和资源甘特图(Ext Scheduler)区别有哪些?甘特图(Ext Gantt)和资源甘特图(Ext Scheduler)是独立的控件。
甘特图主要描述组成项目的任务,以及任务之间的关系(依赖性)。控件中中的每一行代表且仅代表一个任务。
资源甘特图(Ext Scheduler)主要描述资源的分配情况。 例如项目组中有甲乙两个程序员(资源), 甲周一、三做研发, 乙周二到周五做研发。 资源甘特图不描述资源之间的关系
相关文章推荐
- DSOFramer控件文档上传到服务器处理页面后,怎么解析数据 <转>
- web.xml之<context-param>与<init-param>的区别与作用
- 关于web.xml中<web-app>报错解决方案
- <转>文档视图指针互获
- CSS 基础:HTML 标记与文档结构(1)<思维导图>
- JavaWeb 从init-param中读取多重数据(Enumeration<String>)
- [问题与解决] java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
- java_web初学笔记之<JavaBean及内省机制>
- HTML基础知识一(HTML、常见方式、文档结构、<meta>、 网站文件命名、文本修饰、文本样式、段落标记、居中标记、水平线标记、特殊字符、列表、图像)
- Spring启动<二>——XmlWebApplicationContext
- <%@ taglib prefix="r" tagdir="/WEB-INF/tags/r"%>
- java_web初学笔记之<泛型基础>
- 怎么在web.xml中配置一个<filter>对应多个<filter-mapping>
- JSP 2.0 web.xml不再直接支持<taglib>标签配置
- SSH web.xml里<filter-mapping>中的<dispatcher>意思
- Android开源项目第一篇——个性化控件(View)篇<转>
- 超全面的JavaWeb笔记day20<监听器&国际化>
- 由平面设计尸----->>转型到----->>WEB开学程序猿
- <<web>>3d 相册
- Ext-Desktop Web桌面项目 Leetop 开发<持续更新中....>