(5)extjs4.2 客户端代理LocalStorageProxy SessionStorageProxy MemoryProxy
2014-12-11 14:47
423 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>示例-4 Ext.data.Proxy</title> <link rel="stylesheet" type="text/css" href="../js/ext4.2/resources/css/ext-all.css"/> <script type="text/javascript" src="../js/ext4.2/bootstrap.js"></script> <script type="text/javascript" src="../js/ext4.2/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> //★Ext.onReady在DOM模型加载完毕就会执行 Ext.onReady(function(){ /* ★客户端--LocalStorageProxy 实际就是通过本地浏览器存储数据。 1各个浏览器之间互不干扰,同意浏览器共享。 2刷新一下程序,LocalStorage都会增加,关闭浏览器之前保存的数据不会丢失。 3浏览器清缓存cookie等 ,其中保存的数据被清除掉。再添加id从1开始。 */ Ext.define('Search', { extend: 'Ext.data.Model', fields: ['id', 'query'], proxy: { type: 'localstorage', id : 'twitter-Searches' } }); var store = Ext.create('Ext.data.Store', { model: "Search" }); //存储数据 store.load();//加载之前存留的数据 store.add({query: 'Sencha Touch2'}); store.add({query: 'Ext JS2'}); store.sync(); /* //更新(id为20的 将被修改) (前提已经有这些条数据了) var search20 = store.getById(20); alert(search20.get("id")+"~~~"+search20.get("query")) search20.set("query","Ext JS2 New Updated"); store.sync(); //将更新保存到本地*/ /* //删除数据 (id为19的 将被删除) var search19 = store.getById(19); store.remove(search19); store.sync(); //将更新保存到本地 */ /* //清空store store.removeAll();//再添加id从 上次数字 接着开始。 store.sync(); //将更新保存到本地 */ //读取数据 var msg = []; store.each(function (search) { msg.push(search.get('id') + "~~~~~"+search.get('query')); }); Ext.MessageBox.alert('localstorage提示', msg.join('<br />')); ////////////////////////////////////////////////////////////////////////// /*★客户端-- SessionStorageProxy 1当前session内有效。当浏览器新开个别的窗口就从头开始。 2各个session之间互不影响。 */ //定义数据模型 Ext.define('Person', { extend: 'Ext.data.Model', fields: ['name', 'age'], proxy: { type: 'sessionstorage', id: 'myProxyKey' } }); //定义Store var personStore = Ext.create("Ext.data.Store", { model: 'Person' }); //添加数据 personStore.load(); personStore.add({ name: 'www.qeefee.com', age: 1 }); personStore.add({ name: 'qf', age: 26 }); personStore.add({ name: 'qifei', age: 26 }); personStore.sync(); //store filter方法 过滤之后仍为store,且赋值给personStore /* personStore.filter("name", /\.com$/);// personStore.filter( {property: "email", value: /\.com$/}, {filterFn: function(item) { return item.get("age") > 10; }} ); */ //修改store中的第一个 age由1改为88 var p1 = personStore.first(); p1.set("age",88); alert(p1.get("age")); personStore.sync(); //读取数据 personStore.load(); var msg = []; personStore.each(function (person) { msg.push(person.get('name') + ' ' + person.get('age')); }); Ext.MessageBox.alert('sessionstorage提示', msg.join('<br />')); /*★客户端-- MemoryProxy 1MemoryProxy 是将数据存储在内存中的,它只在当前页生效,如果关闭或刷新页面,所有数据都将丢失。 2在使用MemoryProxy 的时候,我们需要为Store指定一个数据集(类似于缓存), store 将通过代理对这个数据集进行操作 */ Ext.define('Person2', { extend: 'Ext.data.Model', fields: ['name', 'age'] }); var data = { Users: [ { name: 'www.qeefee.com2', age: 12 }, { name: 'qeefee2', age: 12 }] } //定义Store var personStore = Ext.create("Ext.data.Store", { model: 'Person2', data: data.Users, proxy: { type: 'memory' } }); //读取数据 var msg = []; personStore.each(function (person) { msg.push(person.get('name') + ' ' + person.get('age')); }); Ext.MessageBox.alert('MemoryProxy提示', msg.join('<br />')); }); </script> </head> <body> </body> </html>
数据代理proxy目录结构
Ext.data.proxy.Proxy 代理类的根类(他分为客户端(Client)代理和服务器代理(Server))
Ext.data.proxy.Client 客户端代理
Ext.data.proxy.Memory 普通的内存代理 ----[重点]
Ext.data.proxy.WebStorage 浏览器客户端存储代理
Ext.data.proxy.SessionStorage 浏览器级别代理----[重点]
Ext.data.proxy.LocalStorage 本地化的级别代理(不能夸浏览器)----[重点]
Ext.data.proxy.Server 服务器端代理
Ext.data.proxy.Ajax 异步加载的方式----[重点]
Ext.data.proxy.Rest 一种特使的Ajax--[知道]
Ext.data.proxy.JsonP 跨域交互的代理----[重点] 跨域是有严重的安全隐患的 extjs的跨域也是需要服务器端坐相应的配合
Ext.data.proxy.Direct 命令.
3+方式的代理
------------------------------------------------------------------------------------------------------------------------
代理(proxy)是用来加载和存取Model 数据的。在开发过程中,我们一般不会直接操作代理,它会很好的配合Store 完成工作,所以在本节内容中,我们主要讲解各种proxy的用法。
代理(proxy)分为两大类:客户端代理和服务器端代理。客户端代理主要完成与浏览器本地存取数据相关的工作,服务器端代理则是通过发送请求,从服务器端获取数据。根据各自获取数据的方式,客户端代理和服务器端代理又可以分为一下几种:
客户端代理:
LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端。
SessionStorageProxy:将数据存储在sessionStorage中,此种方式只在当前会话中生效,当关闭浏览器以后,数据也会随之丢失。
MemoryProxy:将数据存储在内存中,此种方式只在当前页面有效,且如果刷新页面,数据将丢失。
服务器端代理:
Ajax:在当前域中发送请求
JsonP:跨域的请求
Rest:与服务器进行RESTful(GET/PUT/POST/DELETE)交互
Direct:使用 Ext.direct.Manager 发送请求
LocalStorageProxy
要使用代理,我们首先要有一个数据模型类,我们定义一个简单的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 选项,我们在后面的示例中将会看到具体的用法。
有了Store 和 Proxy,我们先保存一条数据到LocalStorage中:
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$/);
我们使用这个filter过滤以.com结尾的name字段,最后得到的结果:
另外,我们还可以使用多个过滤条件:
personStore.filter([ { property: "name", value: /\.com$/ }, { filterFn: function (item) { return item.get("age") > 10; } } ]);
这两个过滤条件是“and”的关系,所以我们目前没有符合的数据。
注意第二个过滤条件,它传入的是一个方法,这种方式可以方便我们自定义过滤条件,如果我们的业务需求比较复杂,我们可以使用过滤方法替代这些过滤条件:
personStore.filter(function (item) { return item.get("age") > 10 && item.get('name').length > 3; });
这里我们过滤age大于10,且名字长度大于3的数据,得到的结果如下:
更新操作:
//得到第一个person对象 var person = personStore.first(); //修改名字字段 person.set('name', 'qeefee.com'); //保存到本地 personStore.sync();
删除操作:
//得到第一个person对象 var person = personStore.first(); //移除 personStore.remove(person); //保存 personStore.sync();
SessionStorageProxy
SessionStorageProxy 的用法与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.qeefee.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 />'));
MemoryProxy
MemoryProxy 是将数据存储在内存中的,它只在当前页生效,如果关闭或刷新页面,所有数据都将丢失。在使用MemoryProxy 的时候,我们需要为Store指定一个数据集(类似于缓存),store 将通过代理对这个数据集进行操作://定义数据模型
Ext.define('Person', { extend: 'Ext.data.Model', fields: ['name', 'age'] });
var
data = { Users: [ { name: 'www.qeefee.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();
本节内容主要介绍了浏览器端代理的用法,在下节内容中,我将介绍如何使用服务器端代理进行数据的操作。
相关文章推荐
- ExtJS 4.2 教程-05:客户端代理(proxy)
- ExtJS 4.2 教程-05:客户端代理(proxy)
- ExtJS 4.2 教程-06:服务器代理(proxy)
- (6)ExtJS4.2 服务器代理(proxy)
- ExtJS 4.2 教程-06:服务器代理(proxy)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)
- 客户端数据存储 localStorage sessionStorage
- ExtJs 入门教程十四[数据代理 :DataProxy]
- Spring2.5学习4.2_Proxy实现动态代理(目标类实现任意接口)
- Java:HttpClient篇,HttpClient4.2在Java中的几则应用:Get、Post参数、Session(会话)保持、Proxy(代理服务器)设置,多线程设置...
- JQuery和JS操作LocalStorage/SessionStorage的方法(转)
- sessionStorage / localStorage
- html5 sessionStorage & localStorage
- localstorage sessionstorage cookie 备忘
- JQuery和JS操作LocalStorage/SessionStorage的方法
- css3 localStorage session设计会话计数器
- Spring2.5学习4.2_Proxy实现动态代理(目标类实现随意接口)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理)
- localStoragesessionStorage
- sessionStorage localStorage 和 cookie 之间的区别转