Ext.js中Proxy有什么用-创新互联

这篇文章将为大家详细讲解有关Ext.js中Proxy有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一：描述

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.js中Proxy有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。