ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ExtJS-Data Package (数据处理包) Store类型

2022-07-13 08:00:05  阅读:146  来源: 互联网

标签:load 存储 Package Data data store 数据 ExtJS Store


更新记录
2022年7月13日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.data.Store(数据存储)

数据存储说明

Ext.date.Store类型用于存储服务器上数据的一个本地子集
并在将数据发回服务器之前跟踪这一数据的变化(如果允许编辑数据的话)
数据存储在框架中为部件供给数据
Store是 模型实例(Model Instance) 和 用于获取数据的代理(Proxy) 的集合
Store还定义了 数据操作,比如:排序、筛选等
自定义数据存储类 通过继承 Ext.data.Store类 即可实现

ExtJS中许多组件依赖Ext.data.Store类,比如:

image

数据存储加载数据

数据存储中的数据可以静态(Static)定义的,比如直接内联的数据
也可以是动态(dynamic)从后端拉取得
一般在定义数据存储类时,需要在数据存储类中指定:
代理(proxy)、读取器(Reader) 和 写入器(Writer)

使用load()方法可以动态加载数据:
数据存储执行load()方法,通过对应的代理(proxy)加载数据
如果将autoLoad配置项设置为true,则在实例化存储时将自动调用load方法
如果将autoLoad配置项设置为false,则可以手动调用load方法来加载数据

数据同步到后端

自动同步数据:
可以将autoSync配置项设置为true
增删改Store中的记录时立即进行同步到服务器
在增删改数据存储中的记录时会自动调用服务器端的RESTful API

手动同步数据:
如果将autoSync配置项设置为false
则可以调用数据存储的sync方法来执行同步操作
调用sync方法将触发批处理操作(对服务器的多个调用)

Store增删改查

通过proxy配置项中配置api配置项,即可配置增删改查操作对应的后端api
当对应操作发生时,将会触发后端的create、update、destroy、read操作
比如:添加新的记录到store中会触发create操作

proxy: {
    type : 'ajax',
    url : 'users.json',
    api : {   ////定义增删改查API
        create:  url + '?action=create',  //增
        destory: url + '?action=destory', //删
        update:  url + '?action=update',  //改
        read:    url + '?action=read'     //查
    },
    reader : {  //设置读取器
         type: 'json',   //设置读取器的类型为JSONReader
         rootProperty: 'data',   //设置书的根节点
         idProperty: 'id',  //设置数据的Id列
         successProperty: 'meta.success' //设置成功检测位
   },
 	writer: {   //设置写入器
          type: 'json',  //设置写入器的类型为JSONWriter
          encode: true,
          writeAllFields: true,  //写入所有属性,实际环境中设置为false
          rootPropertyoot: 'data',   //设置根节点名称
          allowSingle: true,
          batch: false,
   }
}

当触发读取(read)操作时,会传送以下参数到后端:

'action' => string 'read'           //执行的操作,在API中定义的
'_dc'    => string '1603421699813'  //时间戳,防止数据缓存
'page'   => string '1'              //页,请求的页
'start'  => string '0'              //起始位置
'limit'  => string '25'             //限制条数

Store事件

Store常用事件

add: This is called when a record is added to the store
beforeload: This is called before loading the data
beforesync: This is called before the sync operation
datachanged: This is called when records are added or removed from the store
load: This is called when the store reads from a remote data store
remove: This is called when a record is removed from the store
update: This is called when a record gets updated

实例:监听load事件

var myStore = Ext.create('Ext.data.Store', {
    storeId: 'pandastore',
    listeners: {  //监听事件
        load: function (store, records, options) {
            console.log("store load");
        }
    }
});

//触发事件
myStore.load();

标签:load,存储,Package,Data,data,store,数据,ExtJS,Store
来源: https://www.cnblogs.com/cqpanda/p/16452723.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有