ExtJs数据代理我们介绍常用的四种,但会着重介绍ajax代理,因为日常开发中,这个最为常用

Ext.data.proxy.Ajax

AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛的获取数据的方式. 它使用AJAX请求来从服务器获取数据, 然后通常将它们放入 Store中.
让我们来看一个典型的配置. 这里我们为一个Store设置一个AjaxProxy代理. 首先我们准备好一个 Model:

Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
}); //一个包含AjaxProxy代理的Store, 使用参数方式绑定.
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json'
}
});
store.load();
store.on('load',function(store,records){
store.each(function(record){
console.log(record.get('name'));
});
})

这里说明下官网的例子是直接使用store.each 方法 ,但那是没用的

store 中each()方法的使用应在load完使用,确切的说应该在on('load')事件中使用,切记

我们的例子将会把user数据加载到Store中, 首先我们定义一个Model,
Model包含的字段(fields)即为从服务器返回 数据的相应字段. 接下来我们定义一个Store, 它包含了一个proxy配置项.
此配置项将会自动转换为一个 Ext.data.proxy.Ajax类的实例, 此实例包含了我们定义的url参数. 这等效于下面这段代码

new Ext.data.proxy.Ajax({
url: 'users.json',
model: 'User',
reader: 'json'
});

这里出现了两个额外的参数 - model和reader.
这些参数在通过Store来创建proxy实例时是默认指定的 - Store中已经定义了 Model,并且Proxy的默认Reader为JsonReader.

最后我们调用store.load(), 触发执行AjaxProxy的action, 向配置的url发送请求(本示例为'users.json'). 由于我们执行的是数据读取, 所以讲发送一个GET方式的请求.(请求方式的定义参见actionMethods - 默认所有读数据请求(read)的方式为GET, 而所有写请求(create、update、destroy)的方式为POST)

配置项

actionMethods: {
create : 'POST',
read : 'GET',
update : 'POST',
destroy: 'POST'
}

限制

AjaxProxy无法跨域获取数据. 例如你的程序地址为http://domainA.com, 那么你就无法从http://domainB.com获取数据. 这是因为浏览器都有 一个内置的安全机制来阻止AJAX的跨域请求.

如果你需求从其他域名地址获取数据, 并且你无法从服务器端设置代理(某些运行在你自己服务器端的程序, 用来将请求转发给http://domainB.com, 但客户端看来数据还是来自http://domainA.com), 你可以使用Ext.data.proxy.JsonP代理和JSON-P技术, 这样只要http://domainB.com 上的服务器支持JSON-P响应, 就能够解决你的跨域请求问题.

配置Reader和Writer

AjaxProxy可以配置任意类型的Reader来解读服务器端的响应. 如果不显式指定Reader, 将默认使用 JsonReader. 可以使用简单属性对象的方式来配置Reader, 代理将自动将其转换为Reader类的实例:

var proxy = new Ext.data.proxy.Ajax({
model: 'User',
reader: {
type: 'xml',
root: 'users'
}
}); proxy.getReader(); //返回一个XmlReader的实例.

生成Url

AjaxProxy会自动将排序,过滤,翻页和分组参数添加到生成的url中. 可以使用下面这些属性来配置这些参数:

  • pageParam -
    控制如何向服务器发送页数(同样参见startParam和limitParam)
  • sortParam -
    控制如何向服务器发送排序信息
  • groupParam -
    控制如何向服务器发送分组信息
  • filterParam -
    控制如何向服务器发送过滤信息

每个AjaxProxy发出的请求对象由一个Operation对象来描述. 为了说明我们是如何生成自定义url的, 让我们 看看下面这个Operation:

var operation = new Ext.data.Operation({
action: 'read',
page : 2
});

然后我们用此Operation来发布请求, 通过调用read:

var proxy = new Ext.data.proxy.Ajax({
url: '/users'
}); proxy.read(operation); //GET /users?page=2

很简单吧 - Proxy代理类只需要复制Operation中的page值即可. 我们还能自定义如何向服务器发送page数据:

var proxy = new Ext.data.proxy.Ajax({
url: '/users',
pageParam: 'pageNumber', //默认page
}); proxy.read(operation); //GET /users?pageNumber=2

还有另一个方案, 可以配置Operation来发送start和limit参数代替page:

var operation = new Ext.data.Operation({
action: 'read',
start : 50,
limit : 25
}); var proxy = new Ext.data.proxy.Ajax({
url: '/users'
}); proxy.read(operation); //GET /users?start=50&limit;=25

同样地我们可以自定义startParam  limitParam

var proxy = new Ext.data.proxy.Ajax({
url: '/users',
startParam: 'startIndex',//默认start
limitParam: 'pageSize'//默认limit
}); proxy.read(operation); //GET /users?startIndex=50&pageSize;=25

AjaxProxy还会向服务器发送排序和过滤信息. 让我们来看看如何使用Operation来表示:

var operation = new Ext.data.Operation({
action: 'read',
sorters: [
new Ext.util.Sorter({
property : 'name',
direction: 'ASC'
}),
new Ext.util.Sorter({
property : 'age',
direction: 'DESC'
})
],
filters: [
new Ext.util.Filter({
property: 'eyeColor',
value : 'brown'
})
]
});

当使用一个包含sorters和filters参数的Store来加载数据时,
就会在内部生成上面这样的对象. 默认情况下, AjaxProxy 会对sorters和filters进行JSON转换, 从而得到如下结果(注意url发送前会被加密, 这里为便于阅读使用未加密的串):

var proxy = new Ext.data.proxy.Ajax({
url: '/users'
}); proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]

同样地我们能够自定义这些参数项. 假设我们的服务器读取排序信息的格式是"sortBy=name#ASC,age#DESC". 我们可以像这样配置AjaxProxy来提供这种格式:

var proxy = new Ext.data.proxy.Ajax({
url: '/users',
sortParam: 'sortBy',
filterParam: 'filterBy', //我们自定义实现排序信息转码方法 - 将sorters转换为"name#ASC,age#DESC"
encodeSorters: function(sorters) {
var length = sorters.length,
sortStrs = [],
sorter, i; for (i = 0; i < length; i++) {
sorter = sorters[i]; sortStrs[i] = sorter.property + '#' + sorter.direction
} return sortStrs.join(",");
}
}); proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy;=[{"property":"eyeColor","value":"brown"}]

同样我们还能够通过自定义实现encodeFilters方法来对filters信息进行转码

Ext.data.proxy.JsonP

JsonP代理用在当你想从你自己的应用服务器以外的域名加载数据时(跨域调用). 比如你的应用运行在http://domainA.com上, 那么就无法通过 Ajax从http://domainB.com加载数据,
因为浏览器不允许跨域的ajax请求.

而通过JsonP代理我们可以摆脱这个限制. 每当进行AJAX请求时, JsonP代理就在DOM中注入一个<script>标签. 比如我们想从http://domainB.com/users 这个url下加载数据,
那么就会注入一个如下的script标签:

<script src="http://domainB.com/users?callback=someCallback"></script>

在我们注入了上面这个标签后, 浏览器就会向这个url发送一个请求. 通过url中的callback, 我们通知domainB的服务器: 当结果返回时请调用 此回调函数并传入返回的数据. 只要服务器将响应结果组成如下格式,
调用就成功了:

Ext.regModel("User",{
fields:[
{name:'name',type:'string'}
],
proxy:{
type:'jsonp',//跨域交互的代理
url:'http://www.uspcat.com/extjs/person.php'
}
}); var person = Ext.ModelManager.getModel('User');
person.load(1,{
scope:this,
success:function(model){
alert(model.get('name'));
}
});

Ext.data.proxy.LocalStorage

LocalStorageProxy使用最新的HTML5本地数据库API, 将Model数据保存在本地客户端. HTML5本地数据库是一个
键值对存储(例如 不能存储像JSON这样的复杂对象), 因此LocalStorageProxy在保存和读取数据时, 自动进行序列化和反序列化.

本地数据库在保存用户个人信息时非常有用, 从而不再需要在服务端建立数据结构.

Ext.define('User', {
fields: ['id', 'name'],
extend: 'Ext.data.Model',
proxy: {
type: 'localstorage'
}
});
var store = new Ext.data.Store({
model:'User'
});
store.add({name:'somnus'});
// 保存数据
store.sync();
// 读取数据
store.load();
store.each(function(record){
console.info(record.get('name'));
});

Ext.data.proxy.Memory

内存代理. 此代理使用简单的本地变量进行数据的存储/读取, 所以其内容将在每次页面刷新时被清除.

通常此代理并不直接使用, 而是作为Store的辅助服务对象, 为其在加载数据时提供reader对象. 例如, 假设我们有一个 User Model和Store, 以及一些我们想要加载的内部数据, 但是这些数据的格式并不是很合适: 这时我们就可以用一个带有JsonReader的MemoryProxy 来为Store读取这些数据:

//我们将在store中使用的model对象
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
}); //数据字段不是按照model中定义排列的 - 字段'phone'在此称为'phoneNumber'
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
}; //请注意我们是如何通过设置reader的'root'来满足上面的数据结构的.
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
data:data,
model:'User'
}) data.push({name:'sunday',age:1}); memoryProxy.update(
new Ext.data.Operation(
{
action:'update',
data:data
}),
function(result){},
this
); memoryProxy.read(
new Ext.data.Operation(),
function(result){
var datas = result.resultSet.records;
Ext.each(datas,function(model){
console.info(model.get('name'));
});
var totalRecords = result.resultSet.total;
alert('读取内存数据,记录总是:' + totalRecords);
}
);

ExtJs4学习(八)数据代理Proxy的更多相关文章

  1. es6中的Proxy和vue中的数据代理的异同

    1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...

  2. Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)

    文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...

  3. Extjs4学习

    1 Ext js初步 1.1 获取Extjs 下载extjs: 可以从http://extjs.org.cn/ 获得需要的extjs发布包及更多支持. 1.2 搭建学习环境: 假设您的机器已经安装my ...

  4. Python Tutorial 学习(八)--Errors and Exceptions

    Python Tutorial 学习(八)--Errors and Exceptions恢复 Errors and Exceptions 错误与异常 此前,我们还没有开始着眼于错误信息.不过如果你是一 ...

  5. JAVA设计模式-动态代理(Proxy)源码分析

    在文章:JAVA设计模式-动态代理(Proxy)示例及说明中,为动态代理设计模式举了一个小小的例子,那么这篇文章就来分析一下源码的实现. 一,Proxy.newProxyInstance方法 @Cal ...

  6. JAVA学习篇--静态代理VS动态代理

    本篇博客的由来,之前我们学习大话设计,就了解了代理模式,但为什么还要说呢? 原因: 1,通过DRP这个项目,了解到了动态代理,认识到我们之前一直使用的都是静态代理,那么动态代理又有什么好处呢?它们二者 ...

  7. 对数据劫持 OR 数据代理 的研究------------引用

    数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ...

  8. Java学习之动态代理篇

    Java学习之动态代理篇 0x00 前言 在后面的漏洞研究的学习中,必须要会的几个知识点.反射机制和动态代理机制.至于反射的前面已经讲到过了,这里就不做更多的赘述了. 0x01 动态代理 这里先来讲一 ...

  9. 12.Linux软件安装 (一步一步学习大数据系列之 Linux)

    1.如何上传安装包到服务器 有三种方式: 1.1使用图形化工具,如: filezilla 如何使用FileZilla上传和下载文件 1.2使用 sftp 工具: 在 windows下使用CRT 软件 ...

随机推荐

  1. 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. python内存管理总结

    之前在学习与工作中或多或少都遇到关于python内存管理的问题,现在将其梳理一下. python内存管理机制 第0层 操作系统提供的内存管理接口 c实现 第1层 基于第0层操作系统内存管理接口包装而成 ...

  3. 浅谈:@RequestBody,@ResponseBody 和 @RequestParam

    1. @RequestBody @RequestBody:主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据) GET方式无请求体,所以使用@RequestBody接收数据时,前端不 ...

  4. Jquery的load加载本地文件出现跨域错误的解决方案"Access to XMLHttpRequest at 'file:///android_asset/web/graph.json' from(Day_46)

    博主是通过JS调用本地的一个json文件赋值给变量出现的跨域错误, 网上有大量文章,五花八门的,但总归,一般性此问题基本可通过这三种方法解决: https://blog.csdn.net/qq_418 ...

  5. kylin的rowkey优化之按维度分片

    我们知道,系统会对cuboid的数据进行分片处理. 但是默认的分片策略是随机的,如果group by a,b 的查询命中了某个cuboid,但是a=1 and b=1 的两条数据在不同的机器上存储, ...

  6. MongoDB(7)- 文档插入操作

    插入方法 db.collection.insertOne() 插入单条文档到集合中 db.collection.insertMany() 插入多条文档到集合中 db.collection.insert ...

  7. 将 maven repo 部署到 Gitlab

    为什么要将 maven repo 部署到 Gitlab 将 Maven artifacts 放在对应的项目仓库下,而不是专门再去建一个 Maven 仓库.这么做使用起来更方便,更易于管理. 借助 Gi ...

  8. ubuntu 20.04 编译安装 p 详解

    事情的起因 实验需要安装 p4 环境 我考虑到我自己的电脑性能不足,因此打算在本机安装 github上官方仓库的安装教程老旧,都是在 ubuntu14.04或者ubuntu16.04 我长时间用的li ...

  9. GO学习-(17) Go语言基础之反射

    Go语言基础之反射 本文介绍了Go语言反射的意义和基本使用. 变量的内在机制 Go语言中的变量是分为两部分的: 类型信息:预先定义好的元信息. 值信息:程序运行过程中可动态变化的. 反射介绍 反射是指 ...

  10. 七、Numpy高效数据处理

    Numpy的主要作用是进行矩阵运算 在使用时首先要导入包 import numpy as np np.version.version 用来查看版本信息 # 构建一维数组 n1=np.array([1, ...