ExtJS 4：如何配置商店以加载特定 ID 集的模型？答案

【问题标题】：ExtJS 4: How can I configure a store to load models for a specific set of IDs?ExtJS 4：如何配置商店以加载特定 ID 集的模型？
【发布时间】：2011-12-22 07:22:37
【问题描述】：

例如，假设我有一个用于加载人员的服务器 API，它处理这样的请求：GET /people/?id=101,329,27

我想构建一个 Store（可能是一个扩展 Ext.data.Store 的自定义类）——假设它有一个人员 ID 列表——导致代理发出如上所示的请求，所以返回的数据仅适用于该人的子集。

我看到了有关远程过滤的文档，但我担心要使用它，我首先需要调用 store.load() 来加载 all 人，然后调用 filter() 来执行远程过滤。我想第一次加载人的子集。

感谢您的建议！

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

找到了解决方案（尽管仍然愿意听取其他想法）。

首先，您可以使用将传递给操作的配置对象来调用商店的 load() 函数。 Ext.data.Operation 的 API 文档清楚地表明，其中一个配置选项是针对 Filter 对象数组的，因此您可以这样做：

var idFilter = Ext.create('Ext.util.Filter', {
  property: 'id',
  value: '100,200,300'
});

myStore.load({
  filters: [ idFilter ]
});

这会导致 URL 查询字符串包含 ?filter=[{"property"%3Aid%2C"value"%3A100,200,300}]（换言之，[{ property: 'id', value: '100,200,300'}] 的 URL 编码版本）的请求。

您也可以直接致电myStore.filter('id', '100,200,300')，而无需先致电.load()。假设您的商店中有 remoteFilter=true，这将使用之前显示的相同查询参数发出请求。

旁注：您可以通过为代理配置“filterParam”配置选项来更改用于“过滤器”的关键字。例如，如果 filterParam=q，那么上面显示的查询字符串将更改为：?q=[{"property"%3Aid%2C"value"%3A100,200,300}]

第二，您可以在查询字符串中控制过滤器的“结构”。就我而言，我不想要 filter={JSON} 之类的东西，如上所示。我想要一个看起来像这样的查询字符串：?id=100,200,300 为此，我需要扩展一个代理并覆盖默认的 getParams() 函数：

Ext.define('myapp.MyRestProxy', {
    extend: 'Ext.data.proxy.Rest',

    /**
     * Override the default getParams() function inherited from Ext.data.proxy.Server.
     *
     * Note that the object returned by this function will eventually be used by
     * Ext.data.Connection.setOptions() to include these parameters via URL
     * querystring (if the request is GET) or via HTTP POST body. In either case,
     * the object will be converted into one, big, URL-encoded querystring in
     * Ext.data.Connection.setOptions() by a call to Ext.Object.toQueryString.
     * 
     * @param {Ext.data.Operation} operation
     * @return {Object}
     *  where keys are request parameter names mapped to values
     */
    getParams: function(operation) {
        // First call our parent's getParams() function to get a default array
        // of parameters (for more info see http://bit.ly/vq4OOl).
        var paramsArr = this.callParent(arguments),
            paramName,
            length;

        // If the operation has filters, we'll customize the params array before
        // returning it.
        if( operation.filters ) {
            // Delete whatever filter param the parent getParams() function made
            // so that it won't show up in the request querystring.
            delete paramsArr[this.filterParam];

            // Iterate over array of Ext.util.Filter instances and add each
            // filter name/value pair to the array of request params.
            for (var i = 0; i < operation.filters.length; i++) {
                queryParamName = operation.filters[i].property;

                // If one of the query parameter names (from the filter) conflicts
                // with an existing parameter name set by the default getParams()
                // function, throw an error; this is unacceptable and could cause
                // problems that would be hard to debug, otherwise.
                if( paramsArr[ queryParamName ] ) {
                    throw new Error('The operation already has a parameter named "'+paramName+'"');
                }

                paramsArr[ queryParamName ] = operation.filters[i].value;
            }
        }

        return paramsArr;
    }
});

【讨论】：

【解决方案2】：

您还可以让您的模型对象加载自己的记录。您可以从控制器执行以下操作：

this.getRequestModel().load(requestID,{       //load from server (async)
       success: function(record, operation) {
       .....
       }
}

其中 Request 是模型类，requestID 是要查找的 ID。在这种情况下，模型对象也需要定义代理：

proxy: {
        type: 'ajax',
        reader: {
           type:'json',
           root: 'data'
        },
        api: {
            create : 'request/create.json', //does not persist
            read   : 'request/show.json'
       }
    }

【讨论】：