ExtJS的使用方法汇总7——数据存储与传输

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。EXT默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。本章主要介绍EXT中的数据存储与传输。

一、Ext.data.Connection

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.data.Connection的使用方式如下面所示:

(1) 首先创建一个新的Ext.data.Connection实例。

[c-sharp] view plain copy
  1. varconn=newExt.data.Connection({
  2. autoAbort:false,
  3. defaultHeaders:{
  4. referer:'http://www.sina.com.cn'
  5. },
  6. disableCaching:false,
  7. extraParams:{
  8. name:'name'
  9. },
  10. method:'GET',
  11. timeout:300,
  12. url:'01-01.txt'
  13. });

(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。

[c-sharp] view plain copy
  1. conn.request({
  2. success:function(response){
  3. Ext.Msg.alert('info',response.responseText);
  4. },
  5. failure:function(){
  6. Ext.Msg.alert('warn','failure');
  7. }
  8. });

(3) Ext.data.Connection还提供了abort([Number transactionId])函数,当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求,如果不指定id,则会放弃最后一个请求。

二、Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。

(1) 我们使用Ext.data.Record时,通常都是由create()函数开始,首先用create()函数创建一个自定义的Recore类型,如下所示:

[c-sharp] view plain copy
  1. varPersonRecord=Ext.data.Record.create([
  2. {name:'name',type:'string'},
  3. {name:'sex',type:'int'}
  4. ]);

(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:

[c-sharp] view plain copy
  1. varboy=newPersonRecord({
  2. name:'boy',
  3. sex:0
  4. });

(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:

[c-sharp] view plain copy
  1. alert(boy.data.name);
  2. alert(boy.data['name']);
  3. alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComBox,都是通过它实现数据读取、类型转换、排序分列和搜索等操作。Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data.Record实例中,为后面的读取和修改操作做准备。

(1) 在使用之前,首先要创建一个Ext.data.Store的实例,如下面代码:

[c-sharp] view plain copy
  1. vardata=[
  2. ['boy',0],
  3. ['girl',1]
  4. ];
  5. varstore=newExt.data.Store({
  6. proxy:newExt.data.MemoryProxy(data),
  7. reader:newExt.data.ArrayReader({},PersonRecord)
  8. });
  9. store.load();

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

四、小结

本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法,这两个类结合起来形成了Ext.data中的主体数据模型,很多组件都是建立在它们之上的,至于其他的常用的proxy,reader,store:SimpleStore和JsonStore则在后面学习中给出详细介绍。

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。EXT默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。本章主要介绍EXT中的数据存储与传输。

一、Ext.data.Connection

Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.data.Connection的使用方式如下面所示:

(1) 首先创建一个新的Ext.data.Connection实例。

[c-sharp] view plain copy
  1. varconn=newExt.data.Connection({
  2. autoAbort:false,
  3. defaultHeaders:{
  4. referer:'http://www.sina.com.cn'
  5. },
  6. disableCaching:false,
  7. extraParams:{
  8. name:'name'
  9. },
  10. method:'GET',
  11. timeout:300,
  12. url:'01-01.txt'
  13. });

(2) 在创建conn之后,可以调用request()函数发送请求,处理返回的结果。

[c-sharp] view plain copy
  1. conn.request({
  2. success:function(response){
  3. Ext.Msg.alert('info',response.responseText);
  4. },
  5. failure:function(){
  6. Ext.Msg.alert('warn','failure');
  7. }
  8. });

(3) Ext.data.Connection还提供了abort([Number transactionId])函数,当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求,如果不指定id,则会放弃最后一个请求。

二、Ext.data.Record

Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。

(1) 我们使用Ext.data.Record时,通常都是由create()函数开始,首先用create()函数创建一个自定义的Recore类型,如下所示:

[c-sharp] view plain copy
  1. varPersonRecord=Ext.data.Record.create([
  2. {name:'name',type:'string'},
  3. {name:'sex',type:'int'}
  4. ]);

(2) PersonRecord就是我们定义的新类型,然后我们使用new关键字创建PersonRecord的实例:

[c-sharp] view plain copy
  1. varboy=newPersonRecord({
  2. name:'boy',
  3. sex:0
  4. });

(3) 现在,我们得到了PersonRecord的实例boy,如何得到它的属性值?以下有三种方法:

[c-sharp] view plain copy
  1. alert(boy.data.name);
  2. alert(boy.data['name']);
  3. alert(boy.get['name']);

三、Ext.data.Store

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComBox,都是通过它实现数据读取、类型转换、排序分列和搜索等操作。Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data.Record实例中,为后面的读取和修改操作做准备。

(1) 在使用之前,首先要创建一个Ext.data.Store的实例,如下面代码:

[c-sharp] view plain copy
  1. vardata=[
  2. ['boy',0],
  3. ['girl',1]
  4. ];
  5. varstore=newExt.data.Store({
  6. proxy:newExt.data.MemoryProxy(data),
  7. reader:newExt.data.ArrayReader({},PersonRecord)
  8. });
  9. store.load();

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

四、小结

本章主要详细介绍了Ext.data.Record和Ext.data.Store的功能和基本使用方法,这两个类结合起来形成了Ext.data中的主体数据模型,很多组件都是建立在它们之上的,至于其他的常用的proxy,reader,store:SimpleStore和JsonStore则在后面学习中给出详细介绍。

你可能感兴趣的:(ExtJs)