Extjs 网格过滤器 - 动态列表过滤器

Question

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

我很确定我已按照 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"}]

Answer 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');
        }
    }
});

“网格”是我用过滤器命名网格的变量）

Answer 2

我在使用 ExtJs 4.0.2a 时也有同样的情况。我已经找到了autoLoad对于存储必须为 false 的内容以及Ext.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);
            }
        };
    }()

Answer 3

这很简单

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