ExtJS 4中的数据处理

ExtJS 4引入了新的Model类，并且对Store、Proxy等类进行了重大的重构，data包的重要类的组织形式如下图：

Model类是ExtJS 3的Record类的代替者，可以使用Model来表现真实世界中的实体对象，支持关联关系、数据验证、直接通过代理（不依赖Store）读取、保存数据，这些都是Record不支持的。Model类包含一系列表示实体属性的字段，以及若干用于操控实体数据的方法。

ExtJS 4不再支持Record类，但是，data包中某些类仍然在其方法名中包含“Record”字样。

模型的字段使用类Ext.data.Field表示，与ExtJS 3基本兼容，但是去除了allowBlank属性。

只需继承Ext.data.Model类，并声明模型支持的字段即可：

ExtJS 4支持两种实例化模型的方式：

可以在模型类里面添加验证的声明：

在真实世界中，我们通常需要从服务器端获取实体数据，ExtJS 4的一个新特性是：可以在模型内部嵌入一个负责与服务器打交道的代理对象，我们可以脱离Store来进行数据的保存和加载：

注意上面的例子，我们把proxy硬编码在Model类中了，如果想要在不同的proxy中加载模型，可以利用Store将Proxy与Model解耦：

在ExtJS 4中，我们可以使用Ext.data.Association为实体指定关联，关联可以有两种形式：

1. belongsTo：表示与其它实体的多对一（many-to-one）关联
2. hasMany：表示与其它实体的一对多（one-to-many）关联

双向关联也是被ExtJS 4支持的。

下面是一个作者——书籍——章节的实体关联的例子：

对于hasMany属性，我们可以配置以下选项：

配置项	说明
model	关联目标模型的类名
name	在当前模型中创建的，代表获取关联实体的函数的名称，默认是目标实体的类名后面加s
primaryKey	当前实体中作为主键使用的字段，默认id
foreignKey	目标实体中作为外键使用的字段，默认为当前实体名后面加_id（全小写）
filterProperty	用于覆盖目标实体默认的过滤器，如果没有设置，会自动根据foreignKey对目标实体进行过滤

下面是书籍与作者多对一关联的例子：

对于hasMany属性，我们可以配置以下选项：

配置项	说明
model	关联目标模型的类名
primaryKey	目标实体中作为主键使用的字段，默认id
foreignKey	当前实体中作为外键使用的字段，默认为目标实体名后面加_id（全小写）
getterName	用于访问目标实体的getter的名称，默认为get目标实体名
setterName	用于访问目标实体的setter的名称，默认为set目标实体名

如果配置了模型之间的关联关系，我们可以延迟的、按需的到服务器端加载数据，这与Hibernate的延迟加载有些类似：

在ExtJS 4中，代理负责加载、保存数据。代理可以和Store或者直接和Model一起使用。在ExtJS 4中，代理可以分为两类：客户端代理、服务器代理，如下图：

客户端代理使用浏览器的本地数据存储，本地数据存储是HTML5的重要特性，IE 8.0以上和其它现代浏览器均支持。
HTML5存储以键值对的形式存储数据，这些数据不像Cookie，后者会在某些时候发送给服务器。下图时客户端代理类层次：

下表是主要代理类的用法：

代理类	说明
LocalStorageProxy	使用HTML5本地存储（Local Storage）API来读写数据，这些数据是持久化的，即使关闭浏览器仍然存在。本地存储支持键值对的方式存储整数、字符串、布尔类型等，不过这些细节不需要关心，LocalStoreageProxy会负责把JavaScript串行化为字符串： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 //用户参数模型 Ext.define( 'UserPreference', {     extend : 'Ext.data.Model',     fields : [         {             name : 'id',             type : 'int'         }, {             name : 'description',             type : 'string'         }     ],     proxy : {         type : 'localstorage',         id : 'userpreference'    //存储的时候使用的键     } } );   //脱离Store保存数据 var userPref = Ext.ModelManager.create( {     description : 'Favorite JS Framework: Ext JS' }, 'UserPreference' ); userPref.save();   //创建一个使用用户参数的Store var store = Ext.create( 'Ext.data.Store', {     model : 'UserPreference' } ); store.load(); //从本地存储加载数据 //添加数据到Store store.add( {     description : 'Blue theme' } ); store.add( {     description : 'Loiane Groner' } ); //同步，保存数据 store.sync();
SessionStorageProxy	使用HTML会话存储（Session Storage），当会话结束（通常是关闭浏览器窗口），数据就会丢失： JavaScript 1 2 3 4 5 6 {     proxy : {         type : 'sessionstorage',         id : 'userpreference'     } }
MemoryProxy	在内存里边存取数据，一旦浏览器刷新，数据即丢失，下面是一个创建内存代理，并把数据提供给下拉框组件使用的例子： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 Ext.define( 'Gender', {     extend : 'Ext.data.Model',     fields : [         {   name : 'id', type : 'int' },         {   name : 'name', type : 'string' }     ] } ); var data = {     genders : [         { id : 1, name : 'Female' } ,         { id : 2, name : 'Male' } ,         { id : 3, name : 'Unknown' }     ] }; var store = Ext.create( 'Ext.data.Store', {     autoLoad : true,     model : 'Gender',     data : data,   //内存代理，直接指定数据     proxy : {         type : 'memory',         reader : {             type : 'json',             root : 'genders'         }     } } ); var comboBox = Ext.create( 'Ext.form.field.ComboBox', {     fieldLabel : 'Gender',     renderTo : 'genderCombo',     displayField : 'name',     width : 200,     labelWidth : 50,     store : store,     queryMode : 'local',     typeAhead : false } );

服务器代理通过HTTP请求，从Web服务器加载或者保存数据。下面是服务器代理类层次图：

Ext.data.proxy.Server提供了一些公共的配置项，用于控制加载数据的方式：

配置项	说明
api	可以用来指定进行增删改查分别使用的URL，例如： JavaScript 1 2 3 4 5 6 api: {     create  : '/controller/new',     read    : '/controller/load',     update  : '/controller/update',     destroy : '/controller/destroy' }
batchActions	在同步Store数据到Web服务器时，是否使用批量操作，默认true
batchOrder	批量操作时增删改操作的顺序，使用逗号分隔，默认create,update,destroy
cacheString	如果不使用缓存时，传递给Web服务器的时间戳参数，默认_dc
directionParam	使用simpleSortMode时，用于指定排序方向的参数，默认dir
extraParams	该参数用于指定额外的查询参数，每次请求发送时指定的冲突参数，将覆盖extraParams里面的值
filterParam	传递给Web服务器的filter参数，默认filter
groupDirectionParam	使用simpleGroupMode时，用于指定分组的方向，默认groupDir
groupParam	传递给Web服务器的group参数（用于指定分组列），默认group
startParam	传递给Web服务器的start参数（用于限制数据开始索引），默认start
limitParam	传递给Web服务器的limit参数（用于限制数据结束索引），默认limit
noCache	是否通过添加时间戳参数来禁用缓存，默认true
pageParam	传递给Web服务器的page参数（用于指定分页），默认page
simpleGroupMode	如果为真，那么每次只允许发送单个group属性和单个group方向给后端
simpleSortMode	如果为真，那么每次只允许发送单个sort属性和单个sort方向给后端
sortParam	传递给Web服务器的sort参数（用于指定排序列），默认sort
timeout	等待响应的超时毫秒数，默认30000，即30秒
url	用于请求数据的URL
model	该代理关联的模型对象
reader	用于解析（Decoder）服务器数据的Ext.data.reader.Reader对象
writer	用于编码数（Encoder）据并发送给服务器的Ext.data.writer.Writer

Ext.data.proxy.Server还提供了以下常用方法：

方法	说明
read	使用指定的Ext.data.Operation来进行读取操作
create	使用指定的Ext.data.Operation来进行创建操作
destroy	使用指定的Ext.data.Operation来进行销毁操作
update	使用指定的Ext.data.Operation来进行更新操作
batch	执行批量操作，Ext.data.Store的sync()方法内部即是调用该方法完成： JavaScript 1 2 3 4 5 proxy.batch( {     create : [ model1, model2 ],     update : [ model3 ],     destroy : [ model4, model5 ] } );
setExtraParam	设置“extraParams”属性的值

在调用上表的读写函数时，可以通过Ext.data.Operation来指定参数：

配置项	说明
action	该操作需要执行的动作类型，可以是 'create', 'read', 'update' 或者 'destroy'
batch	指定该操作所属的Ext.data.Batch
filters	过滤器的数组
group	分组配置
limit	希望从服务器加载的Model的数量
sorters	排序器的数组
start	分页时的起始偏移量

可以使用Ext.data.Operation来定义排序、过滤等规则：

下表列出主要的服务器代理类及其用法说明：

代理类	说明
Ajax	这是最常使用的代理，使用普通的Ajax请求来加载、存储数据到Web服务器，在ExtJS 3中，它对应了Ext.data.HttpProxy。只需要指定type为ajax即可，下面是一个简单的例子： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Ext.define( 'Book', {     extend : 'Ext.data.Model',     fields : [         { name : 'id', type : 'int' },         { name : 'title', type : 'string' },         { name : 'pages', type : 'int' }     ],     proxy : {         type : 'ajax',         reader : 'json',//默认Reader为JsonReader         url : 'data/books.json'     } } ); var store = Ext.create(Ext.data.Store',{     model: 'Book' }); //通过Store加载模型 store.load(function(records) {}); 当代理发起读请求时，会使用GET方式；当发起写请求（增删改）时，会使用POST请求。必须使用api配置项为CURD分别指定URL。 Ajax代理只能用于访问当前域（domain）的URL。
Rest	这是AjaxProxy的子类型，使用不同的HTTP方法来表示CRUD操作，不需要分别指定URL。
JsonP	用于跨站请求数据，对应ExtJS 3的Ext.data.ScriptTagProxy。其本质上是在HTML中嵌入一个URL为跨域脚本的<script>元素，效果如下： XHTML 1 2 3 <!--注意下面的回调参数callback，这是需要提供给跨站Web服务器，生成脚本内容的--> <script src="http://crossdomain.com?callback=someCallback"> </script> 要使用JsonP代理，可以使用类似下面的代码： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Ext.define( 'Blog', {     extend : 'Ext.data.Model',     fields : [         {             name : 'lang',             type : 'string'         }, {             name : 'url',             type : 'string'         }     ],     proxy : {         type : 'jsonp',         url : 'http://crossdomain.com'     } } ); 在进行数据读写时，不需要关注内部细节，JsonP代理会处理好。 对于跨站Web服务，必须处理好回调，示例如下： PHP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php //回调的名称 $callback = $_REQUEST['callback']; $output = array(         'id' => 1,         'url' => 'loianegroner.com' );   if ($callback) {     //如果有回调，表示为跨站请求，在脚本里调用这个回调     header('Content-Type: text/javascript');     echo $callback . '([' . json_encode($output) . ']);'; } else {     //普通Ajax请求     header('Content-Type: application/x-json');     echo json_encode($output); }

Store主要用于作为Model的容器（管理Model的集合），并且可以配置一个Proxy用于加载/保存数据。同时，Store还负责排序、过滤、分组，下图是Store的类层次图：

其中ArrayStore用于直接读取数组对象：

Reader用于解码来自来自服务器，加载到Model实例或者Store的原始数据。在ExtJS 3中，Reader被耦合到Store中，而在ExtJS 4则耦合到Proxy中。Reader的类层次结构如下：

 

Ext.data.reader.Reader包含以下常用的配置项：

配置项	说明
idProperty	模型的标识符属性从什么字段读取，默认与模型的id字段一致
messageProperty	包含响应消息的字段
croot	包含模型列表的字段
successProperty	包含是否成功的字段，默认为success
totalProperty	包含数据集总数的字段，默认为total，在分页时使用

对于Ext.data.reader.Json，服务器端的响应数据必须匹配如下格式（而不能单单发送Model的数组）：

Writer负责编码JavaScript数据为服务识别的形式，类层次如下：

Writer包含配置项：

配置项	说明
nameProperty	需要作为发送给后台字段名的Model属性，默认name
writeAllFields	是否发送所有字段到服务器，如果为false，则只发送被修改的字段，默认true

下面是JsonWriter的使用例子：

在ExtJS 4中，Store负责排序，排序规则由sorters配置项决定，浏览器端排序(Local)、服务器端排序（Remote）均被支持。每个排序对象均为Ext.util.Sorter的实例。

下面是客户端排序、服务器端排序的例子：

与排序非常类似，ExtJS 4支持浏览器端排序(Local)、服务器端排序（Remote）的数据过滤，每个过滤器对象是Ext.util.Filter的实例。