首页 > 代码库 > extJS 中 ext.data 介绍
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处理
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类型,如下面的代码所示。
varPersonRecord=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=http://www.mamicode.com/[[‘boy‘,0],[‘girl‘,1]];varstore=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=http://www.mamicode.com/‘+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