玩转extjs5之Ext.data.proxy.Ajax（六）

AjaxProxy(Ajax数据代理类)是应用程序中使用最广泛的获取数据的方式. 它使用AJAX请求来从服务器获取数据,然后通常将它们放入 Store中. 例如：

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

//一个包含AjaxProxy代理的Store,使用参数方式绑定.
var store = Ext.create('Ext.data.Store',{
    model: 'User',proxy: {
        type: 'ajax',url : 'users.json'
    }
});

store.load();

上面例子中把user数据加载到Store中,首先定义一个Model,Model包含的字段(fields)即为从服务器返回数据的相应字段. 接下来定义一个Store,它包含了一个proxy配置项. 此配置项将会自动转换为一个 Ext.data.proxy.Ajax类的实例,此实例包含了定义的url参数. 这等效于下面这段代码:

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

AjaxProxy可以配置任意类型的Reader来解读服务器端的响应. 如果不显式指定Reader,将默认使用 JsonReader. 可以使用简单属性对象的方式来配置Reader,代理将自动将其转换为Reader类的实例:

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

AjaxProxy会自动将排序,过滤,翻页和分组参数添加到生成的url中. 可以使用下面这些属性来配置这些参数:

pageParam - 控制如何向服务器发送页数(同样参见startParam和limitParam)

sortParam - 控制如何向服务器发送排序信息

groupParam - 控制如何向服务器发送分组信息

filterParam - 控制如何向服务器发送过滤信息

每个AjaxProxy发出的请求对象由一个Operation对象来描述. 为了说明我们是如何生成自定义url的,例如：

var operation = new Ext.data.Operation({
    action: 'read',page  : 2
});

然后用此Operation来发布请求,通过调用read:

var proxy = new Ext.data.proxy.Ajax({
    url: '/users'
});

proxy.read(operation);

Proxy代理类只需要复制Operation中的page值即可. 还能自定义如何向服务器发送page数据:

var proxy = new Ext.data.proxy.Ajax({
    url: '/users',pageParam: 'pageNumber'
});

proxy.read(operation);

也可以配置Operation来发送start和limit参数代替page:

var operation = new Ext.data.Operation({
    action: 'read',start : 50,limit : 25
});

var proxy = new Ext.data.proxy.Ajax({
    url: '/users'
});

proxy.read(operation);

AjaxProxy还会向服务器发送排序和过滤信息. 例如：

var operation = new Ext.data.Operation({
    action: 'read',sorters: [
        new Ext.util.Sorter({
            property : 'name',direction: 'ASC'
        }),new Ext.util.Sorter({
            property : 'age',direction: 'DESC'
        })
    ],filters: [
        new Ext.util.Filter({
            property: 'eyeColor',value   : 'brown'
        })
    ]
});

当使用一个包含sorters和filters参数的Store来加载数据时,就会在内部生成上面这样的对象. 默认情况下,AjaxProxy 会对sorters和filters进行JSON转换,从而得到如下结果(注意url发送前会被加密,这里为便于阅读使用未加密的串):

var proxy = new Ext.data.proxy.Ajax({
    url: '/users'
});

proxy.read(operation); 
//GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]

玩转extjs5之Ext.data.proxy.Ajax（六）

猜你在找的Ajax相关文章