Extjs 数据代理
Ext.data.proxy.Proxy 代理类的根类
客户端代理:
1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端
要使用代理,我们首先要有一个数据模型类,我们定义一个简单的Person类:
Ext.define('Person', {extend: 'Ext.data.Model', fields: ['name', 'age']});
有了Model,我们还需要一个Store。我们可以把 Store 理解为数据仓库, 它对应数据库中的表,而Store 包含的 Record 则是数据表中的每一行记 录。我们同样简单的创建一个Store对象:
var personStore = Ext.create("Ext.data.Store", { model: 'Person'});
接下来就到我们代理出场的时候了。我们需要创建一个LocalStorageProxy:
var personProxy = new Ext.data.proxy.LocalStorage({ id: 'Person_LocalStorage', model: 'Person'});
将代理和Store 联系在一起
personStore.setProxy(personProxy);
际应用中,可以在Model 或 Store 中直接使用proxy 选项,
我们在后面的示例中将会看到具体的用法。
personStore.add({ name: 'www.qeefee.com', age: 1 }); personStore.add({ name: 'qf', age: 26 }); personStore.add({ name: 'qifei', age: 26 }); personStore.sync();
要查看保存的数据,我们需要先将数据从LocalStorage中加载到Store 中,
然后对Store 进行遍历:
personStore.load();
var msg = [];
personStore.each(function (person) { msg.push(person.get('name') + ' ' + person.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />'));
使用load方法会将所有的数据都加载到Store中,如果我们需要进
行查询指定的数据,就要用到filter方法了
personStore.filter("name", /\.com$/);
使用多个过滤条件:
personStore.filter([
{ property: "name", value: /\.com$/ },
{ filterFn: function (item) { return item.get("age") > 10; } } ]);
使用过滤条件代替过滤方法
personStore.filter(function (item) {
return item.get("age") > 10 && item.get('name').length > 3;});
更新操作:
//得到第一个person对象
var person = personStore.first();
//修改名字字段
person.set('name', 'qeefee.com');
//保存到本地
personStore.sync();
删除操作:
//得到第一个person对象
var person = personStore.first();
//移除
personStore.remove(person);
//保存
personStore.sync();
2.SessionStorageProxy:将数据存储在sessionStorage中,
此种方式只在当前会话中生效,当关闭浏览器以后,数据也会随之丢失。
用法与LocalStorageProxy 的用法基本一致,我们这次在Model中添加 proxy 的配置项
//定义数据模型
Ext.define('Person', {extend: 'Ext.data.Model', fields: ['name', 'age'], proxy: {type: 'sessionstorage',
id: 'myProxyKey' }});
在Model中加入代理配置以后,我们就不需要单独的定义代理对象了,
可以直接使用Store来对其进行操作
//定义Store
var personStore = Ext.create("Ext.data.Store", { model: 'Person'});
//添加数据
personStore.add({name:'www.baidu.com',age:1}); personStore.add({name:'qf',age:26 });
personStore.add({name:'qifei',age: 26 });
personStore.sync();
//读取数据
personStore.load();
Var msg=[];
personStore.each(function(person){ msg.push(person.get('name') + ' ' + person.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />'));
3.MemoryProxy:将数据存储在内存中,此种方式只在当前页面有效,
且如果刷新页面,数据将丢失。
//定义数据模型
Ext.define('Person', { extend: 'Ext.data.Model',
fields: ['name', 'age']});
var data = {Users: [{ name: 'www.baidu.com', age: 1 },
{ name: 'qeefee', age: 1 }]}
//定义Store
var personStore = Ext.create("Ext.data.Store", {
model: 'Person',
data: data.Users, proxy: {type: 'memory'}});
在代码中高亮显示的部分,就是为store设置的缓存。当personStore 定义的时候,它就会自动的将数据加载到Store中,所以在我们访问数据的时候不需要再调用load方法了:
//读取数据
Var msg=[];
personStore.each(function(person) {
msg.push(person.get('name')+'
'+person.get('age'));});
Ext.MessageBox.alert('提示', msg.join('<br />'));
和上两个的操作基本一致,我们可以通过下面的代码添加一行新数据:
personStore.add({ name: 'qifei', age: 26 });
personStore.sync();
服务端代理模式有:
Ajax : 在当前域中发送请求。
JsonP: 跨域的请求。
Rest : 与服务器进行RESTful(GET/PUT/POST/DELETE)交互
Direct: 使用 Ext.direct.Manager 发送请求。
常用的代理模式Ajax
示例:
Ext.onReady(function(){
Ext.define('Person',{extend: 'Ext.data.Model',
fields: ['name', 'age']
});
var store= Ext.create('Ext.data.Store',
{model:'Person',
proxy: {
type: 'ajax',
url: rootUrl +'sample/getjson',
reader:{ type: 'json', root: 'users'}}
});
store.load();
var msg = [];
store.each(function(person){
msg.push(person.get('name')+''+person.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />')); });
在这段代码中,首先定义了Model类Person,然后创建了Person类的数据仓库 store,store 使用了ajax代理,通过url向服务器请求数据,ajax代理的reader 配置项是告诉程序以何种方式读取请求到的数据。
服务器返回的JSON 字符串如下:
{users:[{name:'www.baidu.com', age:1}, {name:'Tom', age:26}]}
如果你打开网络跟踪,会发现程序已经将成功得到了这段JSON字符串。那是为什么仍然是空呢?
原因是当我们调用load()方法的时候,我们告诉store去请求数据吧,然后store就使用ajax的方式请求url,注意,ajax 是异步的,所以当我们调用load()方法以后,马上执行输出的时候,store仍然是空的,可能它还在等待服务器响应数据。
所以,在我们使用ajax方式加载数据的时候,就需要为load() 方法添加一个callback 方法,当数据加载完成以后,再callback方法中进行数据输出,修改load方法的调用:
store.load({
callback:function(records,operation,success){
if(success){varmsg=[];store.each(
function(person){
msg.push(person.get('name') + ' ' + person.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />'));}}
});
在使用ajax进行请求的时候,ajax代理会调用自身的read方法,该方法的第一个参数是Ext.data.Operation 类型,它用来配置我们如何进行请求。我们在load 方法中可以通过配置项传递一些参数,load在调用read方法时将这些参数传递过去,read则会根据这些参数生成Ext.data.Operation 的一个实例。所以,我们可以这样来传递参数
store.load({
page: 2,
limit:10,params:{name:'QF'},
callback:function(records,operation,success){
if(success){varmsg=[];store.each(function(person) {msg.push(person.get('name') + ' ' + person.get('age'));
});
Ext.MessageBox.alert('提示', msg.join('<br />')); }}});
/SampleExtJS/sample/getjson?_dc=1374141754304&name=QF&pag e=2&start=25&limit=10
通过传递这些参数,我们可以完成分页、查询等操作。
JsonP
在ExtJS 中我们可以轻松的使用JsonP代理进行跨域的数据请求:
//创建Store
var store = Ext.create('Ext.data.Store', {model: 'Person', proxy: {
type: 'jsonp',
url: 'http://www.abc.com/sampleextjs/sample/getjsonp',
reader: {type: 'json', root:'users'}}
});
务器返回的字符串为:
Ext.data.JsonP.callback1({
users: [{ name: 'www.baidu.com', age: 1 },
{ name: 'QF', age: 26 }]
})
Direct 代码使用Ext.Direct 向服务器发动数据。
Ext.Direct 技术的好处是,允许你像调用Javascript 方法一样调用服务器端代码
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['firstName', 'lastName'],
proxy: { type: 'direct', directFn: MyApp.getUsers, paramOrder: 'id' }
});
User.load(1);
参考:http://www.qeefee.com/extjs-course-6-server-proxy
Extjs 数据代理的更多相关文章
- ExtJs4学习(八)数据代理Proxy
ExtJs数据代理我们介绍常用的四种,但会着重介绍ajax代理,因为日常开发中,这个最为常用 Ext.data.proxy.Ajax AjaxProxy(Ajax数据代理类)是你的应用程序中使用最广泛 ...
- Javascript - ExtJs - 数据
数据(ExtJs Data) Ext.data命名空间 有关数据存储.读取的类都定义在Ext.data命名空间中.Ext的gridPanel.combobox的数据源都是来自Ext.data提供的类. ...
- MVVM数据代理
MVVM数据代理 function MVVM(options) { this.$options = options || {}; var data = this._data = this.$optio ...
- vue的数据代理
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProp ...
- 对数据劫持 OR 数据代理 的研究------------引用
数据劫持,也叫数据代理. 所谓数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果.比较典型的是 Object.defineProperty() 和 ...
- 数据代理Object.defineProperty()
数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写) 数据代理 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个 ...
- vue中的数据代理原理
const vm = new Vue({ data:{ name:'boos' } }) // 注意 :使用构造函数构建vue实例时,传入的是一个option对象,它包含了data,computed等 ...
- es6中的Proxy和vue中的数据代理的异同
1:概述 1-1:Proxy 用于修改某些操作的默认行为,Proxy可以说在对对象进行各种访问或者操作的时候在外层进行一层拦截,在操作之前都需要经过这种拦截.proxy返回的是一个新对象,可以通过操作 ...
- 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. 基础知 ...
随机推荐
- nodejs nodemailer中间件
var stransporter = nodemailer.createTransport({ host:smtp-163.com', //适合163 secureConnection: true, ...
- VS2010环境下使用VB开发网络编程(WinHttp)
首先点项目——>添加引用——>COM选项卡——>Microsoft WinHttp Services,version 5.1,然后点确定就可以添加Winhttp到项目引用中. 1.如 ...
- object 类 toString() 和 equals() 的覆写
基本作用: objiect类是所有类的父类. 任何一个类定义的时候如果没有明确定义了父类的话,默认父类是Object类. class A extends Object{} 在整个java里面,类的继承 ...
- 3)Java学习笔记:内部类
什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
- 阿里CEO张勇:阿里蚂蚁20亿元扶持开发者
https://bbs.taobao.com/catalog/thread/508895-318032179.htm?spm=a21bo.7724922.8439-0.2.tkjSOl 阿里CEO张勇 ...
- Mysql表锁、行锁、页锁
参考 http://www.jb51.net/article/50047.htm <MySQL行级锁.表级锁.页级锁详细介绍> 页级:引擎 BDB.表级:引擎 MyISAM , 理解为锁住 ...
- NodeMCU之旅(四):实现Web配置页面
引言 利用Web页面做配置可以轻松适应用户的多种设备,如Android, IOS等.本文将介绍如何在NodeMCU中实现配置页面. 接线图请参考NodeMCU之旅(三):响应配置按钮. 配置页面后端 ...
- 样式(Style)和主题(Theme)资源——样式资源
样式和主题资源都是用于对Android应用进行“美化”的,只要充分利用Android应用的样式和主题资源,开发者可以开发出各种风格的Android应用. 样式资源: 如果我们经常需要对 ...
- Linux释放内存脚本
vi recover_mem.sh #!/bin/bash ################## #author:rrhelei@126.com# ################## #系统分配的 ...
- 交叉验证(cross validation)
转自:http://www.vanjor.org/blog/2010/10/cross-validation/ 交叉验证(Cross-Validation): 有时亦称循环估计, 是一种统计学上将数据 ...