客户端代理（proxy）

代理（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();

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