(5)extjs4.2 客户端代理LocalStorageProxy SessionStorageProxy MemoryProxy

来源：互联网发布：企业网络专线价格编辑：程序博客网时间：2024/06/07 14:42

<!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(); //将更新保存到本地 *//* //清空storestore.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来对其进行操作：

//定义Storevar 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 }    ]}//定义Storevar 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();

本节内容主要介绍了浏览器端代理的用法，在下节内容中，我将介绍如何使用服务器端代理进行数据的操作。

0 0