Extjs 学习总结-代理

代理（proxy）是用来加载和存取Model 数据的。开发中一般配合Store完成工作，不会直接操作代理。
代理分为两大类：

客户端代理
服务器代理

客户端代理主要完成与浏览器本地存储数据相关的工作。服务器端代理则是通过发送请求，从服务器获取数据。

根据各自获取数据的方式，客户端代理和服务器代理又分为以下几种：

1. 客户端代理：

   • LocalStorageProxy：将数据存储在localStorage中，此种方式可以持久的将数据存储在客户端。
   • SessionStorageProxy：将数据存储在sessionStorage中，此种方式只在当前会话中生效，当关闭浏览器以后，数据也会随之丢失。
   • MemoryProxy：将数据存储在内存中，此种方式只在当前页面有效，且如果刷新页面，数据将丢失。

2. 服务器端代理：

   • Ajax：在当前域中发送请求
   • JsonP：跨域的请求
   • 与服务器进行RESTful（GET/PUT/POST/DELETE）交互
   • 使用 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$/);

更新操作

//得到第一个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 />'));