Extjs Grid Filter - Dynamic ListFilter

Question

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:

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
}

Some thoughts I had:

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

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)

EDIT:

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

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

Answer 1

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,
    }
}

The store:

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' is the variable that I named my grid with the filters)

Answer 2

I have the same when using ExtJs 4.0.2a. Ive find whatautoLoadmust false for store and some patch toExt.ux.grid.menu.ListMenu`.

The store:

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

And replace show method in ext-4.0.2a/examples/ux/grid/menu/ListMenu.js with:

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

This is simple

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