2015年资源甘特图教程.docVIP

ExtJS 资源甘特图 序言 3 简介 4 ExtJS资源甘特图功能特性 4 资源甘特图运行效果 5 如何安装 6 1.下载运行 6 打开ASP.NET项目 6 运行示例 7 开发入门 7 甘特图控件的基本原理 7 DataStore 10 SchedulerPanel 11 数据结构 12 资源的数据结构 12 事件的数据结构 14 加载数据 15 保存数据 16 实现增删改查接口 16 ASP.NET后台操作 17 自定义资源甘特图 18 自定义列 18 自定义行 19 自定义单元格 20 自定义编辑器 21 编辑器只读事件 22 自定义条形图 23 自定义样式 23 自定义提示框 24 时间刻度和自定义 25 高级应用 28 大数据量和性能优化 28 附录一 Extjs中的DataStore 29 Record 29 Store 30 DataReader 33 1）ArrayReader 33 2）JsonReader 34 3）XmlReader 35 DataProxy和自定义Store 36 序言 手册包括ExtJS资源甘特图的新手入门、组件体系结构及使用、ExtJS资源甘特图中各功能的使用方法及示例应用等，是一个非常适合新手的ExtJS资源甘特图入门手册。本手册主要是针对ExtJS资源甘特图2.0 进行介绍，全部代码、截图等都是基于ExtJS资源甘特图2.0。 简介 资源甘特图又叫负荷图，其纵轴不再列出活动，而是列出整个部门或特定的资源。 Ext Scheduler资源甘特图是基于Extjs核心库的开发的，基于WEB浏览器的甘特图解决方案。 可应用于生产能力进行计划和控制系统等的开发。和Ext Gantt甘特图一样，Ext Scheduler资源甘特图可与任意后端代码（.net, jsp）集成为jsp资源甘特图，资源甘特图等。ExtJS资源甘特图ExtJS资源甘特图是使用Javascript开发的、基于WEB浏览器的甘特图解决方案具备如下特点： 可拖拽调节条形图 丰富的时间线刻度：支持年/月、周/日、周/时、日/时等时间线模式。 自定义列卓越的性能和大数据量支持 懒加载显示：通过分级加载模式，能支持超大数据量显示。 支持右键菜单 支持跟踪甘特图 无需安装浏览器插件 跨浏览器支持 跨服务端平台支持 语言本地化 甘特图 如何安装 1.下载运行 ExtJS甘特图控件是一个纯的组件产品。.NET工程项目为例，是为了让您更方便、快速的掌握如何将ExtJS甘特图控件与您的系统集成开发。 打开ASP.NET项目 下载Web资源甘特图后，将请用VS 运行示例 开发入门 甘特图控件的基本原理 ExtJS资源甘特图控件ExtJS资源甘特图控件 模型层： 甘特图的数据模型包括两个方面，任务模型和依赖模型（任务之间的关联关系）。相对应的类有Ext.ux.maximgb.tg.AdjacencyListStore和Ext.data.Store，而前者继承于后者。 界面显示组件GanttPanel类，只需要定义一些属性就可以了。 控制器： GanttPanel是可视的组件，它用于界面显示、编辑操作、用户交互等功能。AdjacencyListStoreExt.data.Store是不可见的数据组件，负责数据和数据操作。在上的所有数据操作，比如增、删、改、过滤、排序等，都会被ExtJS甘特图控件监听并更新界面。GanttPanel是由两个重要的界面组件组成的： 形表格组件。 右边是条形图组件 如上图，左侧的是，右侧是，他们组合起来就是一个标准的甘特图。//定义的数据模型 ?? ???????var resourceStore = new Ext.data.JsonStore({ proxy : { type : ajax,//data.js中包含资源数据 url : data.js, reader : { type : json, root : staff } }, model : Sch.model.Resource }); ?? ????????//加载事件数据 ?? ???????var eventStore = new Ext.data.JsonStore({ model : Sch.model.Event }); resourceStore.on(load, function