Ext Gantt Web甘特图--DataStore

和甘特图打交道,就不得不和DataStore打交道,甘特图中的数据是存放类型为Store 的数据存储器中,通过指定甘特图中的store 属性来设置表格中显示的数据,通过调用store 的load 或reload方法可以重新加载表格中的数据。ExtJS 中用来定义控件中使用数据的API 位于Ext.Data 命名空间中,本附录我们重点对ExtJS 中的数据存储Store 进行介绍。

Record

首先需要明确是,ExtJS 中有一个名为Record 的类,表格等控件中使用的数据是存放在Record 对象中,一个Record 可以理解为关系数据表中的一行,也可以称为记录。Record 对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。

我们来看直接使用Record 的代码:

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title'},   

3.       {name: 'username', mapping: 'author'},   

4.       {name: 'loginTimes', type: 'int'},   

5.       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}   

6.       ]);   

7.       var r=new MyRecord({   

8.       title:"日志标题",   

9.       username:"easyjf",   

10.   loginTimes:100,   

11.   loginTime:new Date()   

12.   });   

13.   alert(MyRecord.getField("username").mapping);   

14.   alert(MyRecord.getField("lastLoginTime").type);  

首先使用Record 的create 方法创建一个记录集MyRecord,MyRecord 其实是一个类,该类包含了记录集的定义信息,可以通过MyRecord 来创建包含字段值的Record 对象。在上面的代码中,最后的几条语句用来输出记录集的相关信息,MyRecord.getField("username")可以得到记录中username 列的字段信息,r.get("loginTimes")可以得到记录loginTimes 字段的值,而r.data.username 同样能得到记录集中username 字段的值。

对Record 有了一定的了解,那么要操作记录集中的数据就非常简单了, 比如r.set(name,value)可以设置记录中某指定字段的值,r. dirty 可以得到当前记录是否有字段的值被更改过等等。

 

 

Store

Store 可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS 中,GridPanel、ComboBox、DataView 等控件一般直接与Store 打交道,直接通过store来获得控件中需要展现的数据等。一个Store 包含多个Record,同时Store 又包含了数据来源,数据解析器等相关信息,Store 通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store 中,作为其它控件的数据输入。

数据存储器由Ext.data.Store 类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作,在Ext.data.Store 类中数据源由proxy 配置属性定义、数据解析(读取)器由reader 配置属性定义,一个较为按部就班创建Store 的代码如下:

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title'},   

3.       {name: 'username', mapping: 'author'},   

4.       {name: 'loginTimes', type: 'int'},   

5.       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}   

6.       ]);   

7.       var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"});   

8.       var theReader=new Ext.data.JsonReader({   

9.       totalProperty: "results",   

10.   root: "rows",   

11.   id: "id"  

12.   },MyRecord);   

13.   var store=new Ext.data.Store({   

14.   proxy:dataProxy,   

15.   reader:theReader   

16.   });  

 

当然,这样的难免代码较多,Store 中本身提供了一些快捷创建Store 的方式,比如上面的示例代码中可以不用先创建一个HttpProxy,只需要在创建Store 的时候指定一个url 配置参数,就会自动使用HttpProxy 来加载参数。比如,上面的代码可以简化成:

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title'},   

3.       {name: 'username', mapping: 'author'},   

4.       {name: 'loginTimes', type: 'int'},   

5.       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}   

6.       ]);   

7.       var theReader=new Ext.data.JsonReader({   

8.       totalProperty: "results",   

9.       root: "rows",   

10.   id: "id"  

11.   },MyRecord);   

12.   var store=new Ext.data.Store({   

13.   url:"link.ejf",   

14.   proxy:dataProxy,   

15.   reader:theReader   

16.   });  

虽然不再需要手动创建HttpProxy 了,但是仍然需要创建DataReader 等,毕竟还是复杂,ExtJS 进一步把这种常用的数据存储器进行了封装,在Store 类的基础上提供了SimpleStore、SimpleStore、GroupingStore 等,直接使用SimpleStore,则上面的代码可以进一步简化成下

面的内容:

 

1.       var store=new Ext.data.JSonStore({   

2.       url:"link.ejf?cmd=list",   

3.       totalProperty: "results",   

4.       root: "rows",   

5.       fields:['title', {name: 'username', mapping: 'author'},   

6.       {name: 'loginTimes', type: 'int'},   

7.       {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}   

8.       ]   

9.       });  

 

DataReader

DataReader 表示数据读取器,也就是数据解析器,其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS 中的记录集Record 数据对象,并存储到Store 里面的记录集数组中。

数据解析器的基类由Ext.data.DataReader定义,其它具体的数据解析器都是该类的子类,ExtJS 中提供了读取二维数组、JSon 数据及Xml 文档的三种数据解析器,分别用于把内存中的二级数组、JSON 格式的数据及XML 文档信息解析成记录集。下面简单的介绍:

1)ArrayReader

Ext.data.ArrayReader-数组解析器,用于读取二维数组中的信息,并转换成记录集Record

对象。首先看下面的代码:

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title', mapping:1},   

3.       {name: 'username', mapping:2},   

4.       {name: 'loginTimes', type:3}   

5.       ]);   

6.       var myReader = new Ext.data.ArrayReader({   

7.       id: 0   

8.       }, MyRecord);  

 

这里定义的myReader 可以读取下面的二维数组:

1.       [ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ]  

 

2)JsonReader

Ext.data.JsonReader-Json 数据解析器,用于读取JSON 格式的数据信息,并转换成记录集Record 对象。看下面使用JsonReader 的代码:

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title'},   

3.       {name: 'username', mapping: 'author'},   

4.       {name: 'loginTimes', type: 'int'}   

5.       ]);   

6.       var myReader = new Ext.data.JsonReader({   

7.       totalProperty: "results",   

8.       root: "rows",   

9.       id: "id"  

10.   }, MyRecord);  

 

这里的JsonReader 可以解析下面的JSON 数据:

1.       { 'results': 2, 'rows': [   

2.       { id: 1, title: '测试', author: '小王', loginTimes: 3 },   

3.       { id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]   

4.       }  

 

JSonReader 还有比较特殊的用法,就是可以把Store 中记录集的配置信息存放直接保存在从服务器端返回的JSON 数据中,比如下面的例子:

1.       var myReader = new Ext.data.JsonReader();  

 

这一个不带任何参数的myReader,可以处理从服务器端返回的下面JSON 数据:

1.       {   

2.       'metaData': {   

3.       totalProperty: 'results',   

4.       root: 'rows',   

5.       id: 'id',   

6.       fields: [   

7.       {name: 'title'},   

8.       {name: 'username', mapping: 'author'},   

9.       {name: 'loginTimes', type: 'int'} ]   

10.   },   

11.   'results': 2, 'rows': [   

12.   { id: 1, title: '测试', author: '小王', loginTimes: 3 },   

13.   { id: 2, title: '新年好', author: 'williamraym', loginTimes:13}]   

14.   }  

 

3)XmlReader

Ext.data.XmlReader-XML 文档数据解析器,用于把XML 文档数据转换成记录集Record对象。看下面的代码:

 

1.       var MyRecord = Ext.data.Record.create([   

2.       {name: 'title'},   

3.       {name: 'username', mapping: 'author'},   

4.       {name: 'loginTimes', type: 'int'}   

5.       ]);   

6.       var myReader = new Ext.data.XmlReader({   

7.       totalRecords: "results",   

8.       record: "rows",   

9.       id: "id"  

10.   }, MyRecord);  

 

上面的myReader 能够解析下面的xml 文档信息:

1.       <topics>  

2.       <results>2</results>  

3.       <row>  

4.       <id>1</id>  

5.       <title>测试</ title >  

6.       <author>小王</ author >  

7.       <loginTimes>3</ loginTimes >  

8.       </row>  

9.       <row>  

10.   <id>2</id>  

11.   <title>新年好</ title >  

12.   <author> williamraym </ author >  

13.   <loginTimes>13</ loginTimes >  

14.   </row>  

15.   </topics>  

 

DataProxy和自定义Store

DataProxy 字面解释就是数据代理,也可以理解为数据源,也即从哪儿或如何得到需要交给DataReader 解析的数据。数据代理(源)基类由Ext.data.DataProxy 定义,在DataProxy的基础,ExtJS 提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy

等三个分别用于从客户端内存数据、Ajax 读取服务器端的数据及从跨域服务器中读取数据等三种实现。

比如像SimpleStore 等存储器是直接从从客户端的内存数组中读取数据,此时就可以直接使用Ext.data.MemoryProxy , 而大多数需要从服务器端加载的数据直接使用Ext.data.HttpProxy,HttpProxy 直接使用Ext.Ajax 加载服务器的数据,由于这种请求是不能跨域的,所以要要读取跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy。

在实际应用中,除了基本的从内存中读取javascript 数组对象,从服务器读取JSON 数组,从服务器取xml 文档等形式的数据外,有时候还需要使用其它的数据读取方式。比如熟悉EasyJWeb 中远程Web 脚本调用引擎或DWR 等框架的都知道,通过这些框架我们可以直接在客户端使用javascript 调用服务器端业务组件的方法,并把服务器端的结果返回到客户端,客户端得到的是一个javascript 对象或数组。由于这种方式的调用是异步的,因此,

相对来说有点特殊, 即不能直接使用Ext.data.MemoryProxy , 也不能直接使用Ext.data.HttpProxy,当然更不需要Ext.data.ScriptTagProxy,这时候就需要创建自定义的DataProxy 及Store,然后使用这个自定义的Store 来实现这种基于远程脚本调用引擎的框架得到数据。

源网址:http://www.longboo.com/shouce/fulu.htm

时间: 2024-10-06 23:27:21

Ext Gantt Web甘特图--DataStore的相关文章

Ext Gantt Web甘特图--自定义任务树

  GanttPanel中默认的设置很难满足客户多变需求,我们就针对一些常用的扩展做一个说明.       一般最常用的需求是,自定义多列,自定义行,自定义单元格等等.下面我们就分别来说明. 自定义列 GanttPanel的列配置对象,描述了表头.单元格.编辑器等重要配置.一般来说, 我们提供一个列配置对象,显示了"序号"."任务名称"."开始日期"."完成日期"."进度"等比较典型的列. 但是有时我们会显

Ext Gantt Web甘特图--高级应用

甘特图所能支持的数据量,以及界面的渲染和操作性能,是衡量一个甘特图组件是否符合项目需要的重要指标. 为了支持超过万级超大数据量的甘特图,Extjs提供一个数据缓冲视图的解决方案.使用这个方案非常简单,只需要在创建甘特图的时候,加入以下代码.   1.       var g = new Sch.gantt.GanttPanel({    2.                       3.                   view : new Sch.gantt.BufferedGantt

Ext Gantt Web甘特图--自定义提示框

ExtJS甘特图控件有很多提示框效果,当鼠标移上,或进行某些操作的时候,提供更多丰富的信息帮助用户更好的操作. 1.       tooltipTpl : new Ext.XTemplate(    2.           '<h4 class="tipHeader">{Name}</h4>',    3.           '<table class="taskTip">',     4.           '<tr

Ext Gantt Web甘特图--时间刻度和自定义

甘特图提供多种不同的时间刻度的定义,用户也可以自定义自己的时间刻度.系统内置的时间刻度包括以下六种: 1       hourAndDay 小时和天刻度 2       dayAndWeek 天和周刻度 3       weekAndDay 周和天刻度 4       weekAndMonth 周和月刻度 5       monthAndYear 月和年刻度 6       year 年刻度 以下是自定义时间刻度的代码. 1.       Sch.PresetManager.registerPr

在Excel2010中绘制简单的甘特图

甘特图(Gantt Chart)又称横道图,它通过图示形象地表示特定项目的活动顺序与持续时间.在Excel 2003中,可用用自定义图表类型中的"悬浮的条形图"来快速绘制简单的甘特图,而在Excel 2007/2010中,没有现成的自定义图表类型可用,但通过堆积条形图同样可以轻松实现.下面以Excel 2010为例来说明绘制步骤,Excel 2007中的制作步骤类似,示例文件可在文章结尾处下载. 上图A列为某工程一些项目代号,B至D列为"开始日期"."天数

Excel2010甘特图绘制方法

  甘特图(Gantt Chart)又称横道图,它通过图示形象地表示特定项目的活动顺序与持续时间.在Excel 2003中,可用用自定义图表类型中的"悬浮的条形图"来快速绘制简单的甘特图,而在Excel 2007/2010中,没有现成的自定义图表类型可用,但通过堆积条形图同样可以轻松实现. 如果目前该工程正在进行中,可在B11单元格中输入当前日期,如公式: 添加辅助列 1.在数据区域原C列左侧插入两列,分别表示以B11单元格中日期为当前进度的各项目已完成和未完成的天数.如图所示,插入两

Excel 2007绘制甘特图查看项目安排情况

  在Excel 2007中使用图表来进行分析数据,通常大家会选择使用较常见的图表类型,比如图柱.还有一个类型更能体现出表格中的数据,那就是甘特图,也是一种线条图,非常适合用在工程进度的数据上. 下面的过程可帮助在Excel2007中创建甘特图(Gantt Chart).对于此图表,我们使用示例工作表数据.您可以将这些数据复制到工作表中,也可以使用自己的数据,只要使用的列标题和工作表结构是相同的. 将示例工作表数据复制到一个空白工作表中,或者打开包含要绘制到甘特图中的数据的工作表; 工作表数据

c# 树形结构 甘特图

问题描述 在c#中,不用数据库,怎么才可以形成树形图和甘特图,如下图.[img=http://hi.csdn.net/space-9083726-do-album-picid-827559-goto-down.html][/img][img=http://hi.csdn.net/space-9083726-do-album-picid-827558-goto-up.html][/img] 解决方案 解决方案二:http://www.google.com.hk/#hl=zh-CN&newwindo

c# 甘特图 树形表格

问题描述 不使用数据库,可不可以实现以下的树形图和甘特图.我是新手,且非常着急.希望各位高手能够帮个忙,在此先谢了.[img=http://hi.csdn.net/space-9083726-do-album-picid-827559.html][/img][img=http://hi.csdn.net/space-9083726-do-album-picid-827559-goto-down.html][/img] 解决方案 解决方案二:http://www.google.com.hk/#hl