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

本節內容主要介紹了瀏覽器端代理的用法，在下節內容中，我將介紹如何使用服務器端代理進行數據的操做。