ext的数据模型分为以下几个部分:数据记录、记录、数据集中的记录,包括数据的定义和价值。相当于一个实体类。数据代理用于获取数据的代理。相当于数据源。数据解析器数据读取器负责解析代理获取的数据,将其传输到记录并存储在存储中。相当于C#的DataReader。数据集是用于存储数据的集合,类似于C#的Datatable。Extjs3的Proxy和之前的版本相比有一些变化,资料很少,官方文档过于简洁,没有一个完整的例子…我尽力去理解… 1。数据记录数据记录通常由多个字段组成。字段由Ext.data.Field类定义。字段中有丰富的配置项,这使得我们有足够的信息来处理弱类型语言的数据,主要包括:name:字段名;默认值:默认值;Type:数据类型,可以是字符串、int、float、boolean、date和auto(默认)。先介绍这么多,具体用的时候再介绍剩下的。要设置一个数据记录类(注意它不是一个特定的数据),可以使用Ext.data.Record.create方法,该方法接受数组的Field类的配置项并返回一个构造函数。看一个例子:复制的代码如下: script type=' text/JavaScript '//根据字段var topcrecord=Ext.data.Record . create([//创建ext . data . Record的子类{name: 'title' },{ name: 'author ',allowBlank: false },{ name: ' totalPosts ',type: 'int' },{ name 3: '签名']);//创建记录实例var myNewRecord=new topic Record({ title : '请做我的工作',author: 'noobie ',totalPosts: 1,lastPost: new Date(),signature: '' },id //可选地指定记录的id,否则会自动分配一个记录);alert(MyNewRecord . get(' author '));/script这里只演示了Record最基本的功能:定义字段和访问数据。商店也可以与商店一起跟踪记录。就像C#中的DataTable一样,可以跟踪里面DataRow的变化。Extjs几乎把前台开发变成了后台。这些内容将在介绍商店时介绍。2.DataProxy Ext.data.DataProxy是数据代理的抽象基类,实现了DataProxy的通用公共接口。DataProxy最重要的通用方法是doRequest。执行此方法后,将从各种特定数据源中读取数据。从DataProxy继承的具体代理类有:2.1 HttpProxy,这是最常用的代理,通过http请求从远程服务器获取数据。HttpProxy最重要的配置项是配置获取数据的url。HttpProxy不仅支持获取数据,还支持对数据进行CRUD操作。DataProxy的api属性用于配置这四个操作对应的URL。如果没有配置,则采用HttpProxy的url属性。例如:复制代码如下: API 3360 { read : '/controller/load ',create3360'/controller/new ',//服务器必须返回新记录save:'/controller/update '的id属性,destroy : '/controller/destroy _ action ' }注意这里extjs的官方文档相当模糊。
四个操作中的第一个到底是阅读还是负载?配置好美国石油学会(美国石油协会)后,就可以执行doRequest方法,doRequest方法的参数比较复杂:doRequest(字符串操作,分机。数据。记录/分机。数据。记录[]RS,对象参数,Ext.data.DataReader读取器,函数回调,对象范围,对象参数)含义如下:操作:表示执行的是哪种操作,可以是创建、读取、更新、销毁的一种rs:看了半天也没发现这个参数有什么用…… 看源代码发现其中出现了这样的表达式url rs.id,这个或许是为手动音量调节架构的程序更好的构建全球资源定位器(统一资源定位符)用的?直接忽略它,设为空即可参数:这个对象里边的属性:值对会作为发布/获取的参数传到服务器,非常有用reader:数据阅读器,将服务器返回的数据解析成记录的数组。下面会有更详细的解释回电:当读取到服务器数据之后执行的函数。这个函数接受三个参数,分别是: r分机。记录[],服务器端返回的经过读者的数组。这是官方的说法,实际测试下来似乎只有当行为是阅读的时候才是这样,下面有介绍;选项:就是银参数的值成功:是否成功的标致布尔,这个也是服务器端返回的scope:作用域参数:一些附加的参数,会被传到回收的选择参数中。下面我们来完成一个例子,利用httpproxy完成基本的创建、读取、更新和删除操作。先看服务器端代码: 复制代码代码如下: %@使用系统的网络处理程序语言="c# "类="数据代理";使用系统网络.使用系统。集合。通用;公共类数据代理: IHttpHandler {静态列表学生db=新列表学生();静态dataproxy() { db .添加(新学生{ Id='1 ',姓名='李,电话=' 1232 ' });db .添加(新学生{ Id='2 ',姓名='王,电话=' 5568 ' });db .添加(新学生{ Id='3 ',姓名='陈,电话=' 23516 ' });db .添加(新学生{ Id='4 ',姓名='朱,电话=' 45134 ' });db .添加(新学生{ Id='5 ',姓名='周,电话=' 3455 ' });}公共void进程请求(HttpContext上下文){字符串id=context .请求参数[' id '];字符串操作=上下文。请求参数['操作'];字符串结果=" { success : false }if(action==' create '){ } else if(action==' read '){ foreach(学生数据库中的stu){ if(stu .id==id){ result=' { success : true,r :[[']stu .Id '',' '斯图。名字'',''斯图。电话' ']]} ';打破;} } } else if(操作=='update') { } else if(操作=='删除'){ }上下文。响应。内容类型='文本/纯文本;语境。回应。写(结果);} public bool IsReuse { get { return false;} }类学生{字符串id;公共字符串Id { get { return id}设置{ id=value} }字符串名称;公共字符串名称{ get { return name}设置{ name=value} }字符串电话;公共字符串电话{获取{返回电话;}设置{电话=值;} } } } 我们用一个静态的目录来模仿数据库。在处理函数中分别应对四种情况。上面仅实现了阅读的代码,返回一个数组,因为我们最终客户端采用ArrayReader来解析数据。
服务器端的代码没什么好解释的,很简单,再看客户端的: 复制代码代码如下:标题数据代理/标题链接rel='样式表type=' text/CSS ' href=' ext-3。1 .0/resources/CSS/ext-all。CSS '/脚本类型=' text/JAVAScript ' src=' http : ext-3。1 .0/适配器/ext/ext-base-debug。js /脚本类型=' text/JAVAScript ' src=' http 3360 ext-3。1 .0/ext-allvar arrayReader=new ext。数据。arrayReader({ root : ' r ',idIndex: 0,field s : Student });var httproxy=new ext。数据。http proxy({ URL : '数据代理。ashx ',AP : { read : '数据代理。阿什克斯。action=read ',create: 'dataproxy.ashx?action=create ',update: 'dataproxy.ashx?action=update ',destroy: 'dataproxy.ashx?action=delete ' } });延伸文件系统onready(function(){ var form=new Ext .表单面板({ renderto :文档。正文,高: 160,宽: 400,框架: true,标签栏: ' : ',标签栏: 60,标签栏: '右',默认类型: '文本栏',项目3:[{字段标签3360 '标识',id: '标识' },{字段查找字段("标识")。getValue() },arrayReader,函数(r,option,success){ if(option。arraydata。成功){ var RES=r . records[0];延伸文件系统Msg.alert('来自服务器的结果,res.get(' id ')' RES . get('名称)“RES . get(”电话'));} else { Ext .消息警报('结果','未找到');} },这个,arrayReader);} },{ text: 'Delete' },{ text: 'Update' },{ text : ' Create ' }]})});/脚本/标题这里有些东西要解释下,首先是定义了一个学生的记录,这个和服务器端的代码是一致的。然后定义了ArrayReader,ArrayReader是读取数组内的数据,数据格式参考服务器端的代码,它有一个根属性非常重要,指定的是读取数据数据中哪个属性的值(这个值是一个数组的字面量).idIndex也是必须指定的,它标志着哪个字段是主键字段。就好理解了,读取的记录的字段。数组里边的顺序要和记录的字段顺序对应,否则可以通过记录的绘图属性来指定,例如: {名称: '电话,映射:4}就表示读取数组中第四个数值放到电话字段中。下面就是定义httpProxy,设置好api。然后我们创建一个表单
增加4个按钮。先为Read按钮写处理函数:doRequest,一个参数为‘Read’,第二个参数为null,因为我不知道它是做什么用的;第三个参数把要查询的ID的值发送给服务器,第四个参数是阅读器,第五个参数回调非常重要。我们将在这里处理服务器的返回值。请注意,我将最后一个参数设置为arrayReader,因此该函数的选项参数值实际上是arrayReader。我为什么要这样做?首先做个示范,最后一个参数有什么用;第二,因为ArrayReader比较古怪,要注意它没有公共的success property配置项,这意味着它无法判断服务器返回的successProperty,也就是这个回调的successible参数总是未定义的!起初,我认为我服务器上的代码是错误的。后来,我将其调试到源代码中,发现它没有处理这个成功属性。也许ArrayReader不是为在这种环境中使用而设计的。但是作为示范,像这样使用它。实际上,它不处理成功参数,我们可以自己处理。ArrayReader内部有一个arrayData属性,这是一个解析后的json对象。如果返回的json字符串有success属性,那么这个对象也有success属性,这样我们就可以得到服务器的返回值,同样的,我们也可以处理服务器返回的任何数据。当然,这种用法在文档中不可用,仅用于演示。特别注意这次回调的第一个参数。文档说是Record[],其实是一个对象,它的记录属性是Record[]。我只能说extjs文档的这一部分很糟糕。幸运的是,这部分代码非常好。感兴趣的朋友可以调试一下,有更深的了解。好了,一切都准备好了。点击阅读按钮,结果是: 。
本文暂告一段落,其他几篇在操作原理上类似。突然觉得单纯用这个例子来论证似乎不太合适。因为Delete服务器和Update服务器都不需要返回任何数据,而doRequest强制一个DataReader解析返回的数据,非常不方便。在处理表格数据时,doRequest的其他方法可能会有用。对于单个对象的CRUD,可以直接采用低级的Ext.ajax方法(另一篇文章中介绍过),也可以采用form方法处理。本文只是对Extjs数据模型的功能和原理的简单介绍。在实践中,如何高效地组织代码并在服务器和客户端之间传输数据是另一个主题。Ext仍然非常灵活,客户机和服务器之间的通信契约仍然可以由程序员自己决定。太长了.转向下一个.