<!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();
本节内容主要介绍了浏览器端代理的用法，在下节内容中，我将介绍如何使用服务器端代理进行数据的操作。
3122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
