预览ExtJS 4.0的新功能(六):读写器/Opeartion

简介:  转载请注明出处Ext中文网 (http://www.ajaxjs.com )。   预览ExtJS 4.0的新功能(六):读写器/Opeartion 许久未更新Blog了,跟大家说声不好意思,要不是工作特忙,以及游戏特吸引人,不然早就写完了,呵呵。

 转载请注明出处Ext中文网http://www.ajaxjs.com )。

 

预览ExtJS 4.0的新功能(六):读写器/Opeartion

许久未更新Blog了,跟大家说声不好意思,要不是工作特忙,以及游戏特吸引人,不然早就写完了,呵呵。当然还离不开夜兄的好言鼓励,一路有大伙总比一个人不知所然强多了。

下面内容大多源自翻译……

Ext.data.Reader

相信我们并不陌生Reader。虽然Ext 4.0的reader依然发挥着它的解析原始数据的职能,主要是转换特定的数据结构,不过由于新加入数据模型的缘故,整体出发仍需要Reader配合。由于新的 需求被提出,Reader也进行了重构,就是今天我们所看到的新Reader类!

Reader负责解析加载到Model或Store的数据,通常值的是AJAX请求完毕后的那些数据。要告诉Reader类怎么工作,实际就是在配置Model或Sotre的时候说明清楚Reader该怎么做。参阅它们的文档或者更好。

Reader可以按照 Ext.data.Association 的定义为每个model所设定的规则读取复杂多层的数据。如下一个例子充分说明了怎么在一个财务CRM中灵活地透析模型与数据之间操作。首先时定义一些模型:

Edit 2011-9-22 示例代码可能与最新版本的 Ext Model 有区别,但不影响主干意思——感谢 Thanks to QiuQiu/太阳。

Ext.regModel("User", { fields: [ 'id', 'name' ], hasMany: {model: 'Order', name: 'orders'}, proxy: { type: 'rest', url : 'users.json', reader: { type: 'json', root: 'users' } } }); Ext.regModel("Order", { fields: [ 'id', 'total' ], hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'}, belongsTo: 'User' }); Ext.regModel("OrderItem", { fields: [ 'id', 'price', 'quantity', 'order_id', 'product_id' ], belongsTo: ['Order', {model: 'Product', associationKey: 'product'}] }); Ext.regModel("Product", { fields: [ 'id', 'name' ], hasMany: 'OrderItem' });

看上去工作量不少,我们只需要知道,用户有许多张订单,其中每张订单有不同的货物组成。它们的实体数据演示如下:

{ "users": [ { "id": 123, "name": "Ed", "orders": [ { "id": 50, "total": 100, "order_items": [ { "id" : 20, "price" : 40, "quantity": 2, "product" : { "id": 1000, "name": "MacBook Pro" } }, { "id" : 21, "price" : 20, "quantity": 3, "product" : { "id": 1001, "name": "iPhone" } } ] } ] } ] }

返回的JSON层数很多,包括有全部用户(出于演示目的暂且一个)以及用户下面的全部订单(演示一个)以及每张订单里面具体有什么货品(演示两个),最后就是Product关联与OrderItem。于是,我们可以这样地读取和使用数据:

var store = new Ext.data.Store({ model: "User" }); store.load({ callback: function() { //得到的用户 var user = store.first(); console.log("Orders for " + user.get('name') + ":") //列出用户的订单 user.orders().each(function(order) { console.log("Order ID: " + order.getId() + ", which contains items:"); //列出每张订单的货物 order.orderItems().each(function(orderItem) { // 货品数据已经有了,因此我们可以getProduct同步数据。一般而言我们用异步的版本(请参阅{@link Ext.data.BelongsToAssociation}) var product = orderItem.getProduct(); console.log(orderItem.get('quantity') + ' orders of ' + product.get('name')); }); }); } });

运行上述代码的结果会如下:

Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone

Ext.data.Writer

Writer首次出现在Ext 3.0的API,目的是在针对写操作时,提供一个健全的API。Writer在4.0中得到加强和改善。

客户端如何“写”数据?这里的“写”只是为了方便描述页面上的数据发生了变化,需要保存到服务端的这么一个过程。Ext API中,对应的就有Read 读的这么一个过程。CRUD是一个极简洁的抽象过程,Read/Writer也是抽象出的一种普通动作。Store记录的数据没有被保存的话,仍是客户端上内存反映的数据。我们必须透过一些定义良好的界面类将数据保存到服务端之中、数据库之中。这时Writer就发挥作用了。整体API中,Writer的发生过程与Request、Operation有关。

Writer通常为ServerProxy其子类所使用。该类的作用是让Operation与Ext.data.Request之间产生关系,具体说就是根据Operations修改请求对象。例如 Ext.data.JsonWriter会根据配置项参数格式化操作对象及其Ext.data.Model实例。配置项参数来自哪里?原来是来自JsonWriter的构造器参数。

Writer的关键方法便是write(),该方法接受有一个Request类型对象的参数,实际上是经过Request、Operation对象的records属性,获取到基于JSON结构的记录实体,收集要“写入”的那些数据,然后再通过模板方法getRecordData()转换数据格式,保存到writeRecords()中(writeRecords()也是一个模板方法)。故所以,客户端的数据必须转换为特定的格式发送到服务端的。当前,Writer下面提供了两个子类JsonWriter和XMLWriter,代表可以支持JSON/XML的这两种经典数据格式。

另外一点,Writer终端的服务端对象并不包括LocalStorge本地储存。

Operation

单个Operation类表征了Proxy在进行单个读或者写的时候的具体操作,多个Operation可以批处理为一个Batch(Ext.data.Batch)。Operation对象用于激活Stores和Proxy之间操作,但是必须提出,开发人员通常不会直接和Operation对象打交道,也就是Ext API会内部使用Operation。

转载请注明出处Ext中文网http://www.ajaxjs.com)。

 

 

目录
相关文章
|
8月前
|
移动开发 JavaScript 前端开发
jQuery实现多种切换效果的图片切换的五款插件
jQuery实现多种切换效果的图片切换的五款插件
57 0
使用APICloud实现文档下载和预览功能
使用 APICloud 开发 app 时,可以使用 api.download 方法实现下载;预览文档可以使用 superFile 模块。superFile 模块封装了基于腾讯浏览服务 TBS,使用 X5Webkit 内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。
458 0
APICloud 实现文档下载和预览功能
文档下载是很多app,尤其是企业应用中常用的功能。使用APICloud开发app时,可以使用api.download方法实现下载;预览文档可以使用superFile 模块。superFile 模块封装了基于腾讯浏览服务TBS,使用X5Webkit内核,实现文件的展示功能,支持多种文件格式(PDF、Word、Execl、TXT、PPT)。
280 0
APICloud 实现文档下载和预览功能
|
Web App开发 JavaScript 前端开发
自制jQuery焦点图切换简易插件
首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下。
自制jQuery焦点图切换简易插件
|
JavaScript
《jQuery EasyUI开发指南》——10.3 系统上线
本节书摘来自异步社区《jQuery EasyUI开发指南》一书中的第10章,第10.3节,作者:王波著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1464 0