extJS 中 ext.data 介绍

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