标签：class   style   代码   使用   数据   服务器   js   log   

　　最近老大要求使用Extjs写前端，故研究了一番。这玩意功能比起jquery-ui等确实功能强大很多，效果也比较高大上，但是确实比较难使用。本人智商欠费各种坑都跳遍了才试出成果，现主要记录下store和reader的心得。

　　在介绍store之前先说下Model，Model代表应用程序管理的一些对象。例如，我们想在系统中建模一个现实世界，我们将为这世界中的一些物体像使用者、产品和汽车等对象定义一个Model，这些Model对象将被系统注册，被Store（仓库）使用，然后这些仓库又被 Ext中许多与数据绑定的组件所使用。

　　Store 大意是: 仓库、存储的意思. Store类封装了一个客户端缓存,用于存储 Model 对象. Stores 通过一个代理 Proxy 来加载数据, 并提供函数来 排序, 过滤 以及查询 内部所包含的 model 实例.

　　创建Store很简单，只需要传入 Model 以及用来加载/保存 数据的Proxy作为配置项即可:

// 建立一个store要使用的 model Ext.define(‘User‘, { extend: ‘Ext.data.Model‘, fields: [ {name: ‘id‘, 　　type: ‘int‘}, {name: ‘name‘,　　type: ‘string‘}, {name: ‘age‘,　　type: ‘int‘} ] }); var myStore = Ext.create(‘Ext.data.Store‘, { model: ‘User‘, proxy: { type: ‘ajax‘, url: ‘/users.json‘, reader: { type: ‘json‘ } }, autoLoad: true });

在上面的例子中,我们配置了一个 AJAX 代理,从 url ‘/users.json‘ 加载数据. 并告诉Proxy使用JsonReader来解析服务器返回的数据为Model对象.

　　reader 通常用于翻译数据，使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Reader实例， 因为Reader总是和Proxy一起使用， 且其将使用Proxy的reader 配置属性配置。针对上面的代码，reader属性将从服务端读取数据，同时将接受如下的响应：

[ { "id": 1, "name": "Ed Spencer", "age": "22" }, { "id": 2, "name": "Abe Elias", "age": "45" } ]

　　但是假如你已经有了一份定义好的JSON格式，而且看起来和我们提供的那种不太相似，那么你可以通过JsonReader的配置选项来使其可以解析你的格式，例如，你的数据有个root节点，如下：

{ "users": [ { "id": 1, "name": "Ed Spencer", "age": "22" }, { "id": 2, "name": "Abe Elias", "age": "45" } ] }

为了解析这个，我们只需要传递一个root配置以匹配以上的"users":

reader: { type: ‘json‘, root: ‘users‘ }

或者更复杂的JSON格式，有些文档数据经常会以以下结构提供数据：

{ "total": 42, "offset": 0, "users": [ { "id": "ed-spencer-1", "value": 1, "user": { "id": 1, "name": "Ed Spencer", "age": "23" } } ] }

以上示例中的记录数据是在"users"数组中嵌套的一个额外级别，其中的每个“user”项目中都包含有额外元数据（例如本例中的’id‘和‘value’）. 为了解析以上JSON数据中的每个‘user‘项中的数据， 需要特别指定record配置，如下所示：

reader: { type : ‘json‘, root : ‘users‘, record: ‘user‘ }

响应的元数据

服务端可以在其响应中返回元数据，除了记录数据，其中数据本身的描述数据的属性集或用于重新配置的读取器。 为了在响应中获取元数据，需要给响应数据的根简明加上一个‘metaData‘属性. 元数据属性可以包含任何东西， 但若Reader存在，其还支持的一个特定设置属性:

Extjs 4.2使用心得 --- store和reader使用技巧,布布扣,bubuko.com

Extjs 4.2使用心得 --- store和reader使用技巧

标签：class   style   代码   使用   数据   服务器   js   log   

原文：