开发者社区> sp42> 正文

预览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)。

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
文档预览功能使用技巧(2)---打印控制
智能媒体管理 提供了文档预览功能,通过 快速搭建 文章的介绍,详细描述了使用“文档转换 + JS 前端渲染引擎”实现文档预览的过程,本文将介绍预览功能中的打印控制(print=1 参数)技巧。
1657 0
文档预览功能使用技巧(1)---文字拷贝
智能媒体管理提供了文档预览功能,通过 快速搭建 文章的介绍,详细描述了使用“文档转换 + JS 前端渲染引擎”实现文档预览的过程,本文将介绍预览功能中的 文字拷贝 技巧。
1716 0
微信公众号-- 微信分享功能(分享到朋友和朋友圈显示图片和简介)
页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片
15156 0
使用Spring AOP实现MySQL数据库读写分离案例分析
使用Spring AOP实现MySQL数据库读写分离案例分析 前言 分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量。
1820 0
PostgreSQL pg_rewind,时间线修复,脑裂修复,flashback - 从库开启读写后,回退为只读从库。异步主从发生角色切换后,主库rewind为新主库的从库
PostgreSQL pg_rewind,时间线修复,脑裂修复,flashback - 从库开启读写后,回退为只读从库。异步主从发生角色切换后,主库rewind为新主库的从库
823 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
294
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载