extJS 中 ext.data 介绍

2022-10-26 22:50:21

ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来，于是，Ext.data成了数据的来源，负责显示数据。

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的，它包含异步加载、类型转换、分页等功能。

Ext.data默认支持Array、JSON、XML等数据格式，可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构，只需要扩展reader和proxy即可。

DWRProxy就实现了自身的proxy和reader，让EXT可以直接从DWR获得数据.

DataProxy：获取想要的数据，通过他能得到来自不同地方的数据，如数组、远程服务器，并组织成不同的格式。

DataReader：定义数据项的逻辑结构，一个数据项有很多列，每列的名称是什么，分别是什么数据类型，都由该类来定义。另外，还负责对不同格式的数据进行读取和解析。

Store：存储器，用于整合 Proxy 和 Reader，控索取数据时通常和他打交道。

1. Ext.data.Connection

Ext.data.Connection是对Ext.lib.Ajax的封装，它提供了配置使用Ajax的通用方式，它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层的Ext.lib.Ajax相比，Ext.data.Connection提供了更简洁的配置方式，使用起来更方便。

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务，它会从指定的URL获得数据，并把后台返回的数据交给HttpProxy或ScriptTagProxy处理。

ExtJs之所以能异步请求数据，全依赖于Ext.data.Connection. 而ExtAjax只不过是它的一个实例罢了。

全　　称:Ext.data.Connection
命名空间:Ext.data
定义　于:Connection.js
类　　名:Connection
子　　类:Ajax
父　　类:Observable

　　这个类封装了到页面所在主机的连接，允许通过一个配置好的URL来请求数据，也可以临时在请求时传递一个URL。

　　通过这个类获得的请求都是异步的，并且马上返回，调用request后，它并不马上返回数据，要处理数据，要在调用request时传入的options对象中，配置callback或者是success、failure。这三个是回调函数。其区别将在下文具体交待。当然，你也可以使用Connection的事件处理来做一些事情。

　　注意：如果你是要上传文件，你的回调、事件处理函数将不会获得通常意义上的response对象。上传通过IFrame来捕获，所以就没有XMLHttpRequest了。这时，response还是被创建，不过，它的responseText等于IFrame的document.innerHTML，responseXML等于IFrame的document中的xml数据。当然，这个前提是它们存在的时候。

　　这意味着必面回一个合法的XML或HTML document。如果返回的是JSON数据，那么建议你把数据放到<textarea>标记中，返回时通过正则表达式从responseText中取出来了。如果返回的是XML数据，建议放到CDATA里面，通过标准DOM方法从responseXMl中取得数据。

2. Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象，它是Ext.data.Store的最基本组成部分。如果把Ext.data.Store看作是一张二维表，那么它的每一行就对应一个Ext.data.Record实例。

Ext.data.Record的主要功能是保存数据，并且在内部数据发生改变时记录修改的状态，它还可以保留修改之前的原始值。我们使用Ext.data.Record时通常都是由create()函数开始，首先用create()函数创建一个自定义的Record类型，如下面的代码所示。

var PersonRecord=Ext.data.Record.create([

　　{name:'name',type:'string'},
　　{name:'sex',type:'int'}
]);

　　PersonRecord就是我们定义的新类型，包含字符串类型的name和整数类型的sex两个属性，然后我们使用new关键字创建PersonRecord的实例，如下面的代码所示。

3. Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的.

Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些Ext.data.Record实例中，为后面的读取和修改操作做准备.

在使用之前，首先要创建一个Ext.data.Store的实例，如下面的代码所示。

var data=[['boy',0],['girl',1]];

var store=newExt.data.Store({

　　proxy:newExt.data.MemoryProxy(data),

　　reader:newExt.data.ArrayReader({},PersonRecord)
});

store.load()

每个store最少需要两个组件的支持，分别是proxy和reader，proxy用于从某个途径读取原始数据，reader用于将原始数据转换成Record实例。

这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，将data数组中的数据转换成对应的几个PersonRecord实例，然后放入store中。store创建完毕之后，执行store.load()实现这个转换过程。

经过转换之后，store里的数据就可以提供给Grid或ComboBox使用了，这就是Ext.data.Store的最基本用法。
Ext.data.Store提供了一系列属性和函数，利用它们对数据进行排序操作。
可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式，如下面的代码所示。

4.Ext.data：常用proxy之MemoryProxy、HttpProxy、ScriptTagProxy

Ext.data. DataProxy 就是来源这样一种灵感。

Ext.data.DataProxy 是获取数据的代理，数据可能来自于内存，可能来自于同一域的远程服务器数据，更有可能来自于不同域的远程服务器数据。

但是，在实际应用中，我们不会直接使用 Ext.data.DataProxy，而是使用他的子类: MemoryProxy、HttpProxy 和 ScriptTagProxy，他们的作用分别是：

MemoryProxy：获取来自内存的数据，可以是数组、json 或者 xml。

HttpProxy：使用 HTTP 协议通过 ajax 从远程服务器获取数据的代理，需要指定 url。

ScriptTagProxy：功能和 HttpProxy 一样，但支持跨域获取数据，是实现时有点偷鸡摸狗。

5. Ext.data 常用Reader

从proxy中读取的数据需要进行解析，这些数据转换成Record数组后才能提供给Ext.data.Store使用。

6.Ext.data.Store

实际开发时，并不需要每次都对proxy、reader、store这三个对象进行配置，EXT为我们提供了几种可选择的整合方案。

A: SimpleStore = Store + MemoryProxy + ArrayReader

var ds=Ext.data.SimpleStore({

    data:[['id1','name1','descn1'],['id2','name2','descn2']],

　　fields:['id','name','descn']
});

SimpleStore是专为简化读取本地数组而设计的，设置上MemoryProxy需要的data和ArrayReader需要的fields就可以使用了。

B: JsonStore = Store +HttpProxy + JsonReader

var ds = Ext.data.JsonStore({

     url: 'xxx.jsp',

     root: 'root',

     fields: ['id', 'name', 'descn']

});

JsonStore将JsonReader和HttpProxy整合在一起，提供了一种从后台读取JSON信息的简便方法，大多数情况下可以考虑直接使用它从后台读取数据.

C：Ext.data.GroupingStore对数据进行分组

Ext.data.GroupingStore继承自Ext.data.Store，它的主要功能是可以对内部的数据进行分组，我们可以在创建Ext.data.GroupingStore时指定根据某个字段进行分组，也可以在创建实例后调用它的groupBy()函数对内部数据重新分组，如下面的代码所示。

var ds=newExt.data.GroupingStore({

　　　　data:[['id1','name1','female','descn1'],['id2','name2','male','descn2'],['id3','name3','female','descn3'],['id4','name4','male','descn4'],['id5','name5','female','descn5']],

　　　　reader:newExt.data.ArrayReader({

　　　　　　　　fields:['id','name','sex','descn']
　　　　}),

　　　　groupField:'sex',
　　　　groupOnSort:true
});

上例中，我们使用groupField作为参数，为Ext.data.Grouping设置了分组字段，另外还设置了groupOnSort参数，这个参数可以保证只有在进行分组时才会对Ext.data.Grouping-Store内部的数据进行排序。如果采用默认值，就需要手工指定sortInfo参数，从而指定默认的排序字段和排序方式，否则就会出现错误。
创建Ext.data.GroupingStore的实例之后，我们还可以调用groupBy()函数重新对数据进行分组。因为我们设置了groupOnSort:true，所以在重新分组时，EXT会使用分组的字段对内部数据进行排序。如果不希望对数据进行分组，也可以调用clearGrouping()函数清除分组信息，如下面的代码所示。
　　ds.groupBy('id');ds.clearGrouping();

7. ExtAjax

ExtAjax的基本用法如下：

ExtAjax.request({

     url: '07-01.txt',

     success: function(response){

           Ext.Msg.alert("成功！", response.responseText);

     },

     failure: function(response){

           Ext.Msg.alert("失败！", response.responseText);

     },

     params: { name : 'value'}

});

这里调用的是Ext.Ajax的request函数，它的参数是一个JSON对象，具体如下所示。qurl参数表示将要访问的后台网址。

q success参数表示响应成功后的回调函数。

上例中我们直接从response取得返回的字符串，用Ext.Msg.alert显示出来。

q failure参数表示响应失败后的回调函数。
注意，这里的响应失败并不是指数据库操作之类的业务性失败，而是指HTTP返回404或500错误，请不要把HTTP响应错误与业务错误混淆在一起。
q params参数表示请求时发送到后台的参数，既可以使用JSON对象，也可以直接使用
"name=value"形式的字符串。
上面的示例可以在10.store/07-01.html中找到。
Ext.Ajax直接继承自Ext.data.Connection，不同的是，它是一个单例，不需要用new创建实例，可以直接使用。在使用Ext.data.Connection前需要先创建实例，因为Ext.data.Connection是为了给Ext.data中的各种proxy提供Ajax功能，分配不同的实例更有利于分别管理。Ext.Ajax为用户提供了一个简易的调用接口，实际使用时，可以根据自己的需要进行选择。

8. Ext.lib.Ajax 更底层的ajax封装

其实Ext.Ajax和Ext.data.Connection的内部功能实现都是依靠Ext.lib.Ajax来完成的，在Ext.lib.Ajax下面就是各种底层库的Ajax了。
如果使用Ext.lib.Ajax实现以上的功能，就需要写成下面的形式，如下面的代码所示。

Ext.lib.Ajax.request(
　　　　'POST',
　　　　'07-01txt', 
　　　　{
　　　　　　success:function(response){
　　　　　　　　　　 Ext.Msg.alert('成功',response.responseText);
　　　　　　},
　　　　　　failure:function(){ 
　　　　　　　　　　 Ext.Msg.alert('失败',response.responseText);
　　　　　　}
       }, 
       'data='+encodeURIComponent(Ext.encode({name:'value'}))
);

我们可以看到，使用Ext.lib.Ajax时需要传递4个参数，分别为method、url、callback和params。它们的含义与Ext.Ajax中的参数都是一一对应的，唯一没有提到过的method参数表示请求HTTP的方法，它也可以在Ext.Ajax中使用method:'POST'的方式设置。

来源： http://wenku.baidu.com/link?url=vA84T-2kDhlUi_DGQ5DOGs2rOCYIrfPmkXxx8rTrWF797QlIPK6m7JpjQIOcimFSwFJO3A8_Yzj97ouFB9_uz-lzS4E5iLj8fi3vCKdy-Q7

码农公寓

相关文章