Extjs 网格过滤器 - 动态 ListFilter答案

【问题标题】：Extjs Grid Filter - Dynamic ListFilterExtjs 网格过滤器 - 动态 ListFilter
【发布时间】：2012-02-23 14:34:50
【问题描述】：

我正在尝试使用 here in the ExtJS 4 API 所涵盖的数据存储（而不是硬编码列表）来实现 Ext.ux.grid.filter.ListFilter。数据很好，我在此列上看到了一个过滤器选项，但它只是说“正在加载...”，过滤器选项应该是：

我很确定我已经按照 API 规范进行了配置，但没有任何运气。有没有人正确地实现了这一点？

我用来获取过滤器选项的商店是这样设置的：

// get the levels for filtering
var levelStore = Ext.create('Ext.data.Store', {
    fields: ['levels'],
    proxy: {
        type: 'ajax', 
        url: '../json?queryName=levels',
        reader: 'json'
    },
    autoLoad: true
});

我在列中实现了过滤器配置，如下所示：

{
header: 'Level',
dataIndex: 'levels',
width: 160,
sortable: true,
filter: {
    type: 'list',
    store: levelStore
}

我的一些想法：

我是否需要我的过滤器选项数据存储具有特定的列标题，例如“名称”而不是“级别”？

这是否试图在从 ajax 加载之前获取存储选项，并且有一些未指定的方式告诉它在返回 ajax 之后加载这些过滤器选项？

我是否需要将我的过滤器配置与列配置分开来使用这个配置？（我所有的其他过滤器配置，都在列配置中完成，似乎工作正常）

编辑：

json 响应看起来像这样，不确定它是否导致了问题：

[{"levels":"Level 1"},{"levels":"Level 2"},{"levels":"Level 3"}]

【问题讨论】：

标签： extjs extjs4 filtering

【解决方案1】：

我现在已经解决了。我最终使用空选项数组options: [] 配置过滤器，然后在商店中放置一个回调，将过滤器选项添加到空选项数组。像这样：

列模型（带有过滤器配置）：

{
    header: 'Level',
    dataIndex: 'levels',
    itemId: 'levels',
    width: 160,
    sortable: true,
    filter: {
        type: 'list',
        options: [],
        phpMode: true,
    }
}

商店：

var levelStore = Ext.create('Ext.data.Store', {
    fields: ['levels'],
    proxy: {
        type: 'ajax', 
        url: '../json?queryName=levels',
        reader: 'json'
    },
    autoLoad: {
        callback: function() {
            grid.getView().getHeaderCt().child('#levels').initialConfig.filter.options = levelStore.collect('levels');
        }
    }
});

（'grid' 是我用过滤器命名我的网格的变量）

【讨论】：

我需要完全相同的东西，但我不知道如何为 Ext js 3 做到这一点，我很感激你的回答。

【解决方案2】：

我在使用ExtJs 4.0.2a 时也有同样的情况。我ve find whatautoLoadmust false for store and some patch toExt.ux.grid.menu.ListMenu`。

商店：

var levelStore = Ext.create('Ext.data.Store', {
  fields: ['levels'],
  proxy: {
    type: 'ajax', 
    url: '../json?queryName=levels',
    reader: 'json'
  },
  autoLoad: false
});

并将ext-4.0.2a/examples/ux/grid/menu/ListMenu.js中的show方法替换为：

show : function () {
        var lastArgs = null;
        console.debug('show filter menu');
        return function(){
            if (this.loadOnShow && !this.loaded) {
                  this.store.load();
            }
            if(arguments.length === 0){
                this.callParent(lastArgs);
            } else {
                lastArgs = arguments;
                this.callParent(arguments);
            }
        };
    }()

【讨论】：

我已经按照你说的做了。但是现在出现错误Uncaught TypeError: Cannot call method 'each' of null

【解决方案3】：

这很简单

filter: {
    type: 'list',
    options: levelStore.collect('levels') 
}

【讨论】：

我的问题是levelStore 在网格渲染时没有加载。此解决方案将返回一个空数组。