Extjs的数据模型分为以下几个部分：
数据记录 Record
数据集合中的一个条记录，包括数据的定义和值。相当于实体类。
数据代理 Proxy
用来获取数据的代理。相当于Datasource。
数据解析器 DataReader
负责将Proxy获取的数据解析出来传换成Record并存入Store中。相当于C#的DataReader。
数据集 Store
一个保存数据的集合，类似于C#的Datatable。
Extjs3的Proxy较以前版本有了一些变动，资料很少，而且官方文档上相当简练，以至于一个完整的例子都没有…… 我尽力理解……
1. 数据记录
一条数据记录一般是有多个字段组成的。字段由Ext.data.Field类定义。Field的配置项很丰富，使我们有足够的信息在弱类型的语言中处理我们的数据,主要有：
name:字段名;defaultValue：默认值;type:数据类型,可以是string,int,float,boolean,date和auto(默认）。先介绍这么多，其余的在具体用到的时候再介绍。
要建立一个数据记录类（注意不是具体一条数据），可以使用Ext.data.Record.create方法，这个方法接受一个数组的Field类的配置项，返回一个构造函数。看一个例子：
[url=ext-3.1.0/resources/css/ext-all.css]<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
var Student = Ext.data.Record.create(['id', 'Name', 'Telephone']);
var arrayReader = new Ext.data.ArrayReader({
root: 'r', idIndex: 0, fields: Student });
var httpProxy = new Ext.data.HttpProxy({
url: 'dataproxy.ashx',
api: {
read: 'dataproxy.ashx?action=read',
create: 'dataproxy.ashx?action=create',
update: 'dataproxy.ashx?action=update',
destroy: 'dataproxy.ashx?action=delete'
}
});
Ext.onReady(function() {
var form = new Ext.FormPanel({
renderTo: document.body,
height: 160,
width: 400,
frame: true,
labelSeparator: ':',
labelWidth: 60,
labelAlign: 'right',
defaultType: 'textfield',
items: [
{ fieldLabel: 'ID',
id: 'ID'
},
{ fieldLabel: 'Name',
id: 'Name'
},
{ fieldLabel: 'Telephone',
id: 'Telephone'
}
],
buttons: [{ text: 'Read', handler: function() {
httpProxy.doRequest('read', null, { id: form.getForm().findField('ID').getValue() }, arrayReader,
function(r, option, success) {
if (option.arrayData.success) {
var res = r.records[0];
Ext.Msg.alert('Result From Server', res.get('id') + ' ' + res.get('Name')
+' '+ res.get('Telephone'));
}
else {
Ext.Msg.alert('Result','Did not find.');
}
},this,arrayReader);
}
},
{ text: 'Delete' }, { text: 'Update' }, { text: 'Create'}]
})
});
</script>
</head>
这里有些东西要解释下，首先是定义了一个Student的Record，这个和服务器端的代码是一致的。然后定义了ArrayReader，ArrayReader是读取数组内的数据，数据格式参考服务器端的代码，它有一个root属性非常重要，指定的是读取json数据中哪个属性的值（这个值是一个数组的字面量）.idIndex也是必须指定的，它标志着哪个字段是主键。fields就好理解了，读取的Record的字段。数组里边的顺序要和Record的字段顺序对应，否则可以通过Record的mapping属性来指定，例如: {name:'Telephone',mapping:4}就表示读取数组中第4个数值放到Telephone字段中。 下面就是定义httpProxy，设置好api。然后我们创建一个表单：
[img]http://files.jb51.net/upload/2010-1/20100111205835534.png[/img]
[/url]
添加4个按钮。先为Read按钮写上处理函数:doRequest的一个参数是'read',第二个参数是null，因为我不懂它有什么用；第三个参数把要查询的ID的值传给服务器，第四个参数是一个reader，第五个参数callback很重要，我们在这里处理服务器的返回值。注意，我在最后一个参数设置为arrayReader，于是这个函数的option参数的值实际上就是arrayReader。我为什么要这样做呢，一来是做个演示，最后一个参数有什么用，二来是因为ArrayReader比较古怪，注意它没有公开的successProperty配置项，也就是说它无法判断服务器返回的success属性，也就是这个callback的success参数永远是undefined!我一开始以为是我服务器端的代码不对，后来debug进源代码，发现它确实不处理这个success属性。或许ArrayReader设计的本意就不是用在这个环境里的。不过作为演示，那就这样用吧。其实它不处理success参数我们自己还是可以处理的。arrayReader内部有个arrayData属性，它是一个解析好的json对象，如果返回的json字符串中有success属性那么这个对象也有success属性，这样我们就可以获得服务器的返回值，同理，也可以处理服务器返回的任何数据。当然，这种用法是文档上没有的，仅供演示。这个callback的第一个参数，要特别注意，文档上说是Record[]，不过实际上它是一个对象，它的record属性才是Record[]。我只能说extjs这部分的文档很糟糕。幸好这部分的代码是很不错的，有兴趣的朋友可以调试进去看看，以便有更深刻的理解。好了，万事俱备，点击下Read按钮，结果出来了:
[url=http://www.1sucai.cn/upload/2010-1/20100111205835975.png][img]http://files.jb51.net/upload/2010-1/20100111205835330.png[/img]
[/url]
此文暂告一段落，其他几个操作原理上类似的，突然发现，如果单纯的用这个例子来演示似乎不太合适。因为Delete和Update服务器端都不需要返回什么数据，而doRequest强制要求用一个DataReader来解析返回的数据，很不方便。或许在操作表格型的数据的时候doRequest的其他方法才有用武之地。针对单个对象的CRUD，可以直接采用更底层的Ext.ajax方法（另文介绍），或者利用表单的方法来处理。
本文只是对Extjs的数据模型的功能和原理做一简单的介绍，在实际中如何高效的组织代码和在服务器与客户端间传递数据是一个另外的话题。Extjs还是很灵活的，客户端和服务器端的通信契约还是可以让程序员自己决定。
太长了…转下篇…
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
![[img]http://files.jb51.net/upload/2010-1/20100111205835534.png[/img] [/url] 添加4个按钮。先为Read按钮写上处理函数:doRequest的一个参数是'read',第二个参数是null，因为我不懂它有什么用；第三个参数把要查询的ID的值传给服务器，第四个参数是一个reader，第五个参数callback很重要，我们在这里处理服务器的返回值。注意，我在最后一个参数设置为arrayReader，于是这个函数的option参数的值实际上就是arrayReader。我为什么要这样做呢，一来是做个演示，最后一个参数有什么用，二来是因为ArrayReader比较古怪，注意它没有公开的successProperty配置项，也就是说它无法判断服务器返回的success属性，也就是这个callback的success参数永远是undefined!我一开始以为是我服务器端的代码不对，后来debug进源代码，发现它确实不处理这个success属性。或许ArrayReader设计的本意就不是用在这个环境里的。不过作为演示，那就这样用吧。其实它不处理success参数我们自己还是可以处理的。arrayReader内部有个arrayData属性，它是一个解析好的json对象，如果返回的json字符串中有success属性那么这个对象也有success属性，这样我们就可以获得服务器的返回值，同理，也可以处理服务器返回的任何数据。当然，这种用法是文档上没有的，仅供演示。这个callback的第一个参数，要特别注意，文档上说是Record[]，不过实际上它是一个对象，它的record属性才是Record[]。我只能说extjs这部分的文档很糟糕。幸好这部分的代码是很不错的，有兴趣的朋友可以调试进去看看，以便有更深刻的理解。好了，万事俱备，点击下Read按钮，结果出来了: [url=http://www.1sucai.cn/upload/2010-1/20100111205835975.png][img]http://files.jb51.net/upload/2010-1/20100111205835330.png[/img] [/url] 此文暂告一段落，其他几个操作原理上类似的，突然发现，如果单纯的用这个例子来演示似乎不太合适。因为Delete和Update服务器端都不需要返回什么数据，而doRequest强制要求用一个DataReader来解析返回的数据，很不方便。或许在操作表格型的数据的时候doRequest的其他方法才有用武之地。针对单个对象的CRUD，可以直接采用更底层的Ext.ajax方法（另文介绍），或者利用表单的方法来处理。 本文只是对Extjs的数据模型的功能和原理做一简单的介绍，在实际中如何高效的组织代码和在服务器与客户端间传递数据是一个另外的话题。Extjs还是很灵活的，客户端和服务器端的通信契约还是可以让程序员自己决定。 太长了…转下篇…](http://www.1sucai.cn/upload/2010-1/20100111205835198.png){kind=link}