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

demo 下载 https://github.com/ningmengxs/Extjs.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏维C果糖

详述查看 MySQL 数据文件存储位置的方法

我们可能会有一个疑惑,那就是:当我们在本地(自己的电脑)安装完 MySQL 之后,也创建了很多的数据库啊、表啊,也存储了很多的数据啊,但是这些内容都存储到哪里了...

22950
来自专栏维C果糖

详述 MySQL 导出数据遇到 secure-file-priv 的问题

ERROR 1290 (HY000): The MySQL server is running with the –secure-file-priv opti...

42860
来自专栏JackieZheng

Hadoop阅读笔记(三)——深入MapReduce排序和单表连接

  继上篇了解了使用MapReduce计算平均数以及去重后,我们再来一探MapReduce在排序以及单表关联上的处理方法。 在MapReduce系列的第一篇就有...

31570
来自专栏企鹅号快讯

大话程序猿眼里的高并发

高并发是指在同一个时间点,有很多用户同时的访问URL地址。比如:淘宝的双11,双12,就会产生高并发,如贴吧的爆吧,就是恶意的高并发请求。也就是DDOS攻击,再...

226100
来自专栏企鹅号快讯

2018年科技带给我们的新惊喜

2017年,诸多创新在科技史上留下浓墨重彩的一笔。一些科幻电影中描绘的未来场景,已出现在现实生活中。 新的一年,那些技术突破会给人们带来新的惊喜呢? ? 人工智...

25450
来自专栏JackieZheng

漫谈可视化Prefuse(五)---一款属于我自己的可视化工具

  伴随着前期的基础积累,翻过API,读过一些Demo,总觉得自己已经摸透了Prefuse,小打小闹似乎已经无法满足内心膨胀的自己。还记得儿时看的《武状元苏乞儿...

30280
来自专栏IMWeb前端团队

Nodejs进阶:MD5入门介绍及crypto模块的应用

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 简介 MD5(Message-Digest Algorithm)是计算机安...

31050
来自专栏企鹅号快讯

Kotlin 1.2 的新增特性

转自:开源中国 www.oschina.net/translate/whats-new-in-kotlin-12 多平台项目 (实验性) 多平台项目是 Kotl...

21670
来自专栏IMWeb前端团队

Nodejs进阶:MD5入门介绍及crypto模块的应用

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载 简介 MD5(Message-Digest Algorithm)是计算机安...

64570
来自专栏企鹅号快讯

PHP的学习路线

1、PHP的学习路线 任何网站全都是由网页组成的,也就是说想完成一个网站,必须先学会做网页,掌握静态网页的制作技术是学习开发网站的先决条件。 因此我们要学习HT...

873100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励