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

  最近老大要求使用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存在,其还支持的一个特定设置属性:

  • root: 响应中包含记录数据的节点对应的根属性名称
  • idProperty: 数据中的主键字段属性名
  • totalProperty: 数据中的所有记录数属性名
  • successProperty: 响应中成功状态属性名
  • messageProperty: 一个可选的响应信息的属性名
  • fields: 在将响应数据转换成records之前用于重新配置Model的字段集的配置

Extjs 4.2使用心得 --- store和reader使用技巧,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。