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实例。

view plain copy to clipboard print ?

1. var conn=new  Ext.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.             });  

var conn=new Ext.data.Connection({ autoAbort:false, defaultHeaders:{ referer:'http://www.sina.com.cn' }, disableCaching:false, extraParams:{ name:'name' }, method:'GET', timeout:300, url:'01-01.txt' });

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

view plain copy to clipboard print ?

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.             });  

conn.request({ success:function(response){ Ext.Msg.alert('info',response.responseText); }, failure:function(){ Ext.Msg.alert('warn','failure'); } });

  

(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类型，如下所示：

view plain copy to clipboard print ?

1. var PersonRecord=Ext.data.Record.create([  
2.                 {name:'name' ,type:'string' },  
3.                 {name:'sex' ,type:'int' }  
4.             ]);  

var PersonRecord=Ext.data.Record.create([ {name:'name',type:'string'}, {name:'sex',type:'int'} ]);

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

view plain copy to clipboard print ?

1. var boy=new  PersonRecord({  
2.                 name:'boy' ,  
3.                 sex:0  
4.             });  

var boy=new PersonRecord({ name:'boy', sex:0 });

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

view plain copy to clipboard print ?

1. alert(boy.data.name);  
2. alert(boy.data['name' ]);  
3. alert(boy.get ['name' ]);  

alert(boy.data.name); alert(boy.data['name']); 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的实例，如下面代码：

view plain copy to clipboard print ?

1. var data=[  
2.                 ['boy' ,0],  
3.                 ['girl' ,1]  
4.             ];  
5.             var store=new  Ext.data.Store({  
6.                 proxy:new  Ext.data.MemoryProxy(data),  
7.                 reader:new  Ext.data.ArrayReader({},PersonRecord)  
8.             });  
9.             store.load();  

var data=[ ['boy',0], ['girl',1] ]; var store=new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},PersonRecord) }); store.load();

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

四、小结

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