第九课,Extjs数据处理
目标：
了解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
});