资源甘特图教程

《资源甘特图教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、ExtJS资源甘特图序言3简介4ExtJS资源甘特图功能特性4资源甘特图运行效果5如何安装61.下载运行6打开ASP.NET项目6运行示例7开发入门7甘特图控件的基本原理7DataStore10SchedulerPanel11数据结构12资源的数据结构12事件的数据结构14加载数据15保存数据16实现增删改查接口16ASP.NET后台操作17自定义资源甘特图18自定义列18自定义行19自定义单元格20自定义编辑器21编辑器只读事件22自定义条形图23自定义样式23自定义提示框24时间刻度和自定义25高级应用28大数据量和性能优化28附录一Extjs中的DataStore29Record29S

2、tore30DataReader331）ArrayReader332）JsonReader343）XmlReader35DataProxy和自定义Store36序言手册包括ExtJS资源甘特图的新手入门、组件体系结构及使用、ExtJS资源甘特图中各功能的使用方法及示例应用等，是一个非常适合新手的ExtJS资源甘特图入门手册。本手册主要是针对ExtJS资源甘特图2.0进行介绍，全部代码、截图等都是基于ExtJS资源甘特图2.0。简介资源甘特图又叫负荷图，其纵轴不再列出活动，而是列出整个部门或特定的资源。ExtScheduler资源甘特图是基于Extjs核心库的开发的，基于WEB浏览器的甘特图解

3、决方案。可应用于生产能力进行计划和控制系统等的开发。和ExtGantt甘特图一样，ExtScheduler资源甘特图可与任意后端代码（.net,jsp）集成为jsp资源甘特图，asp.net资源甘特图等。ExtJS资源甘特图功能特性ExtJS资源甘特图是使用Javascript开发的、基于WEB浏览器的甘特图解决方案，具备如下特点：l可拖拽调节条形图l丰富的时间线刻度：支持年/月、周/日、周/时、日/时等，用户也可以自定义时间线模式。l自定义列。l卓越的性能和大数据量支持l懒加载显示：通过分级加载模式，能支持超大数据量显示。l支持右键菜单l支持跟踪甘特图l无需安装浏览器插件l跨浏览器支持l跨

4、服务端平台支持l语言本地化资源甘特图运行效果如何安装1.下载运行ExtJS资源甘特图控件是一个纯表现层的组件产品。下面以ASP.NET工程项目为例，是为了让您更方便、快速的掌握如何将ExtJS资源甘特图控件与您的系统集成开发。使用JAVA开发和ASP.NET类似，这里不再敖述。打开ASP.NET项目下载《Web资源甘特图+ASP.NET工程实例下载》后，将它解压到某个文件夹下面，请用VS打开相应的工程文件。运行示例点击运行后，最终的运行结果如下图所示。开发入门甘特图控件的基本原理ExtJS资源甘特图控件继承至Extjs的GridPanel，如果你熟悉Extjs，那么使用Extjs资源甘特图就

5、非常的轻松；如果没有，你需要花一点时间来先学习一下Extjs。ExtJS资源甘特图控件按照MVC（模型、视图、和控制器）的设计框架设计。1.模型层：甘特图的数据模型包括两个方面，任务模型和依赖模型（任务之间的关联关系）。相对应的类有Ext.ux.maximgb.tg.AdjacencyListStore和Ext.data.Store，而前者继承于后者。2.界面显示组件：我们主要使用这个GanttPanel类，只需要定义一些属性就可以了。3.控制器：这个是由Extjs资源甘特图内部控制的，我们只需要在适当的时候，相应一些事件就可以定制我们自己的功能。GanttPanel是可视的组件，它用于界面

6、显示、编辑操作、用户交互等功能。AdjacencyListStore和Ext.data.Store是不可见的数据组件，负责管理数据模型和数据操作。在dataStore上的所有数据操作，比如增、删、改、过滤、排序等，都会被ExtJS甘特图控件监听并更新界面。GanttPanel是由两个重要的界面组件组成的：1.左边是数据表格或树形表格组件，继承至Extjs的Datagrid。所以Datagrid的操作也可以运用于GanttPanel，就连API也是一样的。2.右边是条形图组件，这个是Extjs资源甘特图控件特有的。如上图所示，左侧的是数据表格或树形表格，右侧是条形图，他们组合起来就是一个标准的

7、资源甘特图。我们先帖出一个最简单的，显示一个甘特图例子的完整代码。读者朋友可以对代码有个基本的了解，然后在逐步分析各个部分的代码。1.//定义资源的数据模型  2.       varresourceStore=newExt.data.JsonStore({3.proxy:{4.type:'ajax',5.//data.js中包含资源数据6.url:'data.js',7.reader:{8.type:'js