玩转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（六）

猜你喜欢