ExtJS 网格过滤器：如何从外部 json 加载“列表”过滤器选项？

Posted 2023-03-16

【中文标题】ExtJS 网格过滤器：如何从外部 json 加载“列表”过滤器选项？

【英文标题】：ExtJS grid filters: how can I load 'list' filter options from external json?

【发布时间】：2011-08-25 15:39:36

【问题描述】：

我有一个 ExtJS (4.0) 网格，它工作正常。现在我希望它通过添加过滤器来推进它。我希望用户能够按状态过滤项目。

我创建了以下商店：

var status_store = Ext.create('Ext.data.Store', 
    model: 'Statuses',
    proxy: 
        type: 'ajax',
        url: '/json/statuses/',
        reader: 'json'
    
);

我可以看到它加载，/json/statuses/ 将返回以下 json 对象：

[
  
    "name": "OK",
    "isActive": true
  ,
  
    "name": "Outdated",
    "isActive": true
  ,
  
    "name": "New",
    "isActive": true
  
]

现在我定义过滤器：

var filters = 
    ftype: 'filters',
    encode: encode,
    local: local,
    filters: [
        type: 'list',
        dataIndex: 'name',
        store: 'status_store',
        labelField: 'name'          
    ]
;

并将过滤器添加到我的列定义中：

text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: type: 'list',

当网格加载时会发生以下错误：

Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)

当我点击菜单的列标题时：

Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)

我该如何解决这个问题，还是我在概念上做错了什么？

这是我的代码的完整引用，以防万一：http://pastebin.com/SNn6gFJz

【参考方案1】：

filters: [
             type: 'list',
             dataIndex: 'name',
             store: 'status_store',
             labelField: 'name' ,
             options:[a,b]
         ]

您还必须在列表过滤器中提供选项。

【讨论】：

ListFilter 接受存储引用或选项对象。这里的问题是 store 的值是一个字符串而不是一个引用。

@jd。字符串包含什么？ storeId 或存储引用变量名称？你能说明一下here。

【参考方案2】：

我遇到了类似的问题。我在这里关注了@jd 对另一个答案的评论，但选项菜单只是说“正在加载......”。我用一点技巧解决了这个问题here。

【参考方案3】：

感谢您诊断问题。 4.1 修复是这个修改 ListMenu.js

在构造函数的else部分

替换

        me.store.on('load', me.onLoad, me);

与

        // add a listener to the store object
        var storeObject = Ext.StoreMgr.lookup(me.store);
        storeObject.on('load', me.onLoad, me);
        me.store = storeObject;

【讨论】：

正如在其他 cmets 中指出的那样，问题在于 ListFilter 类需要一个实际的存储对象，而不是您可以在框架的大多数其余部分中使用的存储配置或存储 ID 字符串。框架代码很好；您根本没有遵循 API。