目标：
了解Extjs的数据模型
应用Extjs异步数据提交
对于ajaxpro的应用
介绍一个基本的设计模式
内容：
数据记录： Record
数据集合中的一个条记录，包括数据的定义和值。相当于实体类。
数据代理 Proxy
用来获取数据的代理。相当于Datasource。
数据解析器 DataReader
负责将Proxy获取的数据解析出来传换成Record并存入Store中。相当于C#的DataReader。
数据集 Store
一个保存数据的集合，类似于C#的Datatable
要建立一个数据记录类（注意不是具体一条数据），可以使用Ext.data.Record.create方法
var TopicRecord = Ext.data.Record.create([{name: 'title' }, {name: 'author', allowBlank: false },
{name: 'totalPosts', type: 'int' },{name: 'lastPost',type: 'date' }]};
按照记录格式新建一条记录
var myNewRecord = new TopicRecord(
{
title: 标题,
author: '作者',
totalPosts: 1,
lastPost: new Date()
},
读取记录：
Ext.msg.alert(myNewRecord.get('title'));//返回标题
alert(myNewRecord.data.title);
alert(myNewRecord.data[‘title’]);
alert(myNewRecord.get[’title‘]);
2.数据代理
这是最常用的proxy，通过一个http请求从远程服务器获取数据。HttpProxy最重要的配置项就是配置获取数据的url。HttpProxy不仅仅支持获取数据，它支持对数据的CRUD操作。DataProxy的api属性就是用来配置这4种操作对应的url的。如果不配置，就采用HttpProxy的url属性
取数据是connection的事，不用我们费心了，转换数据成记录集，这个是reader的事，也不用我们费心了。HttpProxy的作用事实就是二者的外观类
EXTJS数据读取对象
1 function Read3() {//arrayReader应用
2 var Myarray=[['陈建强','男',26],['张黎','女',25],['张静','女',27],['张冰','女',24]];
3 var Myrecord=Ext.data.Record.create([
4 {
5 name:'userName',
6 allowBlank:false
7 },
8 {
9 name:'userSex'
10 },
11 {
12 name:'userAge',
13 type:'int'
14 }
15 ]);
16 var Myproy=new Ext.data.ArrayReader({id:2},Myrecord);
17 var Mydata=Myproy.readRecords(Myarray);
18 var str="";
19 for(var i=0;i<Mydata.records.length;i++)
20 {
21 str="总条数:"+Mydata.totalRecords+"<br>";
22 str+="记录编号:"+Mydata.records[i].id+"<br>";
23 str+="用户名:"+Mydata.records[i].data.userName+"<br>";
24 str+="json:"+Mydata.records[i].json;
25 }
26 Ext.Msg.alert("ArrayReader的应用",str);
27 }
28 function Read4() {//jsonReader应用
29 var Myjson={
30 results:4,
31 rows:[
32 {
33 userName:'陈建强',
34 userSex:'男',
35 userAge:26
36 },
37 {
38 userName:'张黎',
39 userSex:'女',
40 userAge:25
41 },
42 {
43 userName:'张静',
44 userSex:'女',
45 userAge:27
46 },
47 {
48 userName:'张冰',
49 userSex:'女',
50 userAge:24
51 }
52 ]
53 };
54 var Myrecord=Ext.data.Record.create([
55 {
56 name:'userName',
57 allowBlank:false
58 },
59 {
60 name:'userSex'
61 },
62 {
63 name:'userAge',
64 type:'int'
65 }
66 ]);
67 var MyjsonReader=new Ext.data.JsonReader({
68 totalProperty:'Results',
69 root:'rows',
70 idProperty:'userAge'
71 },Myrecord);
72 var Mydata=MyjsonReader.readRecords(Myjson);
73 var str="";
74 for(var i=0;i<Mydata.records.length;i++)
75 {
76 str="总条数:"+Mydata.totalRecords+"<br>";
77 str+="记录编号:"+Mydata.records[i].id+"<br>";
78 str+="用户名:"+Mydata.records[i].data.userName+"<br>";
79 str+="json:"+Mydata.records[i].json;
80 }
81 Ext.Msg.alert("JsonReader的应用",str);
82 }
83 function Read5() {
84 var xmlDocument;
85 if(Ext.isIE){
86 xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
87 xmlDocument.async=false;
88 xmlDocument.resolveExternals = false;
89 xmlDocument.load('MyPages/Users.xml');
90 }
91 else{
92 xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
93 }
94 var Myrecord=Ext.data.Record.create([
95 {
96 name:'userName',
97 allowBlank:false
98 },
99 {
100 name:'userSex'
101 },
102 {
103 name:'userAge',
104 type:'int'
105 }
106 ]);
107 var MyxmlReader = new Ext.data.XmlReader({
108 totalRecords: "results",
109 record: "row", //row是节点选择器
110 id: "userAge"
111 }, Myrecord);
112 var Mydata=MyxmlReader.readRecords(xmlDocument);
113 var str="";
114 for(var i=0;i<Mydata.records.length;i++)
115 {
116 str="总条数:"+Mydata.totalRecords+"<br>";
117 str+="记录编号:"+Mydata.records[i].id+"<br>";
118 str+="用户名:"+Mydata.records[i].data.userName+"<br>";
119 str+="json:"+Mydata.records[i].json;
120 }
121 Ext.Msg.alert("xmlReader的应用",str);
122
123 }
3，数据存储之store
Store 可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在ExtJS中，GridPanel,ComboBox,DataView等控件直接通过Store来获得控件中需要展现的数据。一个Store包含了多个Record,同时Store又包含了数据来源，数据解析器等相关信息。Store通过调用具体的数据解析器（DataReader）来解析指定类型或格式的数据（DataProxy）,并转换成记录集的形式保存在Store中，作为其他控件的数据输入。
数据存储器由 ExtJS.Store类来定义，一个完整的数据存储器要知道数据源（DataProxy）及数据解析方式（DataReader）才能工作，在ExtJS.Store类中数据源由Proxy配置属性定义、数据解析器由reader配置属性定义
SimpleStore是专为简化读取本地数组而设计的，设置上MemoryProxy需要的data和ArrayReader需要的fields就可以使用了
SimpleStore = Store + MemoryProxy + ArrayReader
var ds = Ext.data.SimpleStore({
data: [
['id1','name1','descn1'],
['id2','name2','descn2']
],
fields: ['id','name','descn']
});
JsonStore将JsonReader和HttpProxy整合在一起，提供了一种从后台读取JSON信息的简便方法，
JsonStore = Store + HttpProxy + JsonReader
var ds = Ext.data.JsonStore({
url: 'xxx.jsp',
root: 'root',
fields: ['id','name','descn']
});
Ext.data.GroupingStore继承自Ext.data.Store，它的主要功能是可以对内部的数据进行分组，我们可以在创建Ext.data.GroupingStore时指定根据某个字段进行分组，也可以在创建实例后调用它的groupBy()函数对内部数据重新分组
var ds = new Ext.data.GroupingStore({
data: [
['id1','name1','female','descn1'],
['id2','name2','male','descn2'],
['id3','name3','female','descn3'],
['id4','name4','male','descn4'],
['id5','name5','female','descn5']
],
reader: new Ext.data.ArrayReader({
fields: ['id','name','sex','descn']
}),
groupField: 'sex',
groupOnSort: true
});