ExtJS-Ext.data.Store采用Ext.data.proxy.Ajax获取数据后并进行处理

本文介绍: Ex t js-Ex t.data.St o re 采用Ex t.data.proxy.Aja x 获取数据后并进行处理

Ext.dat a.Sto r e采用Ext.data.proxy.Ajax获取数据后并进行处理

需求：

使用Extjs中的Ext.data.Sto r e时，利用Ext.data.proxy.Ajax的配置来获取后台返回数据，想对返回的响应数据进行二次处理。

解决 方法

Ext.data.proxy.Ajax配置中存在一个属性配置 extractResp on s eData（模板方法，以允许子类指定如何为阅读器获取响应。），参数是response，需要返回处理后的数据

API中截图如下：
Ext.data.proxy.Ajax.extractResponseData
API内容：

extractResponseData ( response ) : Object TEMPLATE PRIVATE
Template method to allow subclasses to specify how to get the response for the reader.
PARAMETERS
response :  Object
The server response
RETURNS :Object
The response data to be used by the reader
This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

响应参数结构：
在这里插入图片描述

代码 内容

写法一：

Ext.create('Ext.data.TreeStore', {
    model: 'treeModel',
    proxy: {
        type: 'ajax',
        method: 'POST',
        url: 'getMenuTreeData.action',
        reader: {
            type: 'json'
        },
        extractResponseData: function(response) {
            // 将响应的数据进行转换，具体的返回数据，可以自行打印响应参数进行查看
            var result = Ext.util.JSON.decode(response.responseText);
            // 将处理后的数据，重新赋值给响应的数据
            response.responseText = Ext.util.JSON.encode(dealMenuTreeData(result))
            // 返回响应数据
            return response
        },
    },
    autoLoad: true
});

写法二

Ext.create('Ext.data.TreeStore', {
    model: 'treeModel',
    proxy: {
        type: 'ajax',
        method: 'POST',
        url: 'getMenuTreeData.action',
        reader: {
            type: 'json'
        },
        extractResponseData: function(response) {
            // 将响应的数据进行转换，具体的返回数据，可以自行打印响应参数进行查看
            var result = Ext.util.JSON.decode(response.responseText);
            // 直接返回处理后的数据，我这里的数据是数组类型
            return dealMenuTreeData(result)
        },
    },
    autoLoad: true
});