一：描述

Proxy被Store用來載入和儲存資料。Proxy的型別主要分為兩大種客戶端代理和服務端代理。

客戶端代理：

1.LocalStorageProxy:在瀏覽器支援的情況下，儲存資料到本地

2.SessionStorageProxy：在瀏覽器支援的情況下，儲存資料到session

3.MemoryProxy：儲存資料到本地記憶體，在頁面重新整理的時候，資料會丟失

服務端代理：

1.Ajax :在同一個域內，傳送請求到服務端。

2.JsonP:在跨域的情況下，傳送請求到服務端

3.Rest ：使用RESTful HTTP請求

4.Direct ：使用Ext.direct.Manager 傳送請求。

二：Ext.data.proxy.Ajax

AjaxProxy是在應用中使用最廣的一種代理方式，透過ajax請求服務端，載入資料。

如：

Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});

var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json'
}
});

store.load();

這裡我們載入User資料到Store,我們事先定義了一個Model,期望服務端返回對應欄位的資料。

接下來我們透過proxy的配置，自動生成一個sotre

new Ext.data.proxy.Ajax({
url: 'users.json',
model: 'User',
reader: 'json'
});

1. Readers和Writers

AjaxProxy可以配置一個Reader去解析服務端返回的資訊。如果沒有設定Reader,AjaxProxy

預設使用一個JsonReader.

如：

var proxy = new Ext.data.proxy.Ajax({
model: 'User',
reader: {
type: 'xml',
root: 'users'
}
});

proxy.getReader(); //returns an XmlReader instance based on the config we supplied

2.Url generation

AjaxProxy自動插入排序，過濾，分頁和分組選項到任何請求的url中，他透過以下引數來進行配置：

pageParam : 頁碼（也可以參考startParam和limitParam）

sortParam : 排序

groupParam : 分組

filterParam : 過濾

三：config

1.extraParams ：其它引數

2.limitParams : 預設為limit

3.noCache : 是否快取請求，預設為true

4.pageParam : 預設為page

5.reader : Ext.data.reader.Reader

用來解析資料到一個Model或一個Store.

如：

Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
});

Json字串為：

{
"success": true,
"users": [
{ "name": "User 1" },
{ "name": "User 2" }
]
}

6.url

7.actionMethods

預設值：create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'

四：Store & AjaxProxy舉例

var store = Ext.create('MyDesktop.ext.TimeoutController', {
fields : ['roleId', 'roleName', 'status'],
proxy : {
type : 'ajax',
actionMethods : {
read : 'POST'
},
pageParam : 'pageNo',
limitParam : 'pageSize',
url : '../role/findFuncRoles.do',
reader : {
type : 'json',
root : 'funcRoles',
totalProperty : 'totalCount'
}
}
});

Ext.js4.2.1 Proxy

相關文章