這篇文章將為大家詳細(xì)講解有關(guān)Ext.js中Proxy有什么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)綿陽免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一：描述

Proxy被Store用來加載和保存數(shù)據(jù)。Proxy的類型主要分為兩大種客戶端代理和服務(wù)端代理。

客戶端代理：

1.LocalStorageProxy:在瀏覽器支持的情況下，存儲數(shù)據(jù)到本地

2.SessionStorageProxy：在瀏覽器支持的情況下，存儲數(shù)據(jù)到session

3.MemoryProxy：存儲數(shù)據(jù)到本地內(nèi)存，在頁面刷新的時(shí)候，數(shù)據(jù)會丟失

服務(wù)端代理：

1.Ajax :在同一個(gè)域內(nèi)，發(fā)送請求到服務(wù)端。

2.JsonP:在跨域的情況下，發(fā)送請求到服務(wù)端

3.Rest ：使用RESTful HTTP請求

4.Direct ：使用Ext.direct.Manager 發(fā)送請求。

二：Ext.data.proxy.Ajax

AjaxProxy是在應(yīng)用中使用最廣的一種代理方式，通過ajax請求服務(wù)端，加載數(shù)據(jù)。

如：

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數(shù)據(jù)到Store,我們事先定義了一個(gè)Model,期望服務(wù)端返回對應(yīng)字段的數(shù)據(jù)。

接下來我們通過proxy的配置，自動生成一個(gè)sotre

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

1. Readers和Writers

AjaxProxy可以配置一個(gè)Reader去解析服務(wù)端返回的信息。如果沒有設(shè)置Reader,AjaxProxy

默認(rèn)使用一個(gè)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自動插入排序，過濾，分頁和分組選項(xiàng)到任何請求的url中，他通過以下參數(shù)來進(jìn)行配置：

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

sortParam : 排序

groupParam : 分組

filterParam : 過濾

三：config

1.extraParams ： 其它參數(shù)

2.limitParams : 默認(rèn)為limit

3.noCache : 是否緩存請求  ，默認(rèn)為true

4.pageParam : 默認(rèn)為page

5.reader : Ext.data.reader.Reader

用來解析數(shù)據(jù)到一個(gè)Model或一個(gè)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

默認(rèn)值：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'
}
}
});

關(guān)于“Ext.js中Proxy有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：Ext.js中Proxy有什么用-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/eosgh.html