Extjs 网格过滤器 - 动态 ListFilter [英] Extjs Grid Filter - Dynamic ListFilter

问题描述

我正在尝试使用数据存储(而不是硬编码列表)来实现 Ext.ux.grid.filter.ListFilter 这里在 ExtJS 4 API.数据很好，我在此列上看到了一个过滤器选项，但它只是说正在加载..."过滤器选项应该在的位置:

I am trying to implement Ext.ux.grid.filter.ListFilter using a data store (rather than a hardcoded list) as covered here in the ExtJS 4 API. The data comes in fine and I see a filter option on this column but it just says "Loading..." where the filter options are supposed to be:

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

I am pretty sure I have this configured as per the API specs but have not had any luck with this. Has anyone implemented this correctly?

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

The store I use to get the filter options is set up like this:

// 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
});

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

I implemented the filter config in the column like so:

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

我的一些想法:

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

Do I need my filter option data store to have a specific column title, like "name" instead of "level"?

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

Is this trying to get the store options before they are loaded from ajax, and there is some unspecified way of telling it to load these filter options after the ajax is returned?

我是否需要实现与列配置分开的过滤器配置才能使用这个配置?(我所有的其他过滤器配置，都在列配置中完成，似乎工作正常)

Do I need to implement my filter configuration separate from the column config to use this one? (all my other filter configurations, are done right in the column config and seem to work fine)

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

The json response looks something like this, not sure if it is causing the trouble:

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

推荐答案

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

I have it resolved now. I ended up configuring the filter with an empty options array options: [] and then put a callback on the store that adds the filter options to the empty options array. Like this:

列模型(带过滤器配置):

The column model (with filter config):

{
    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' 是我用过滤器命名我的网格的变量)

('grid' is the variable that I named my grid with the filters)

这篇关于Extjs 网格过滤器 - 动态 ListFilter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！