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 来实现这种基于远程脚本调用引擎的框架得到数据。
