ExtJS 4.2 教程-05：客戶端代理（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();

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