Results 1 to 6 of 6

Thread: Grid ListFilter using store

  1. #1

    Default Grid ListFilter using store

    I am trying to implement Ext.ux.grid.filter.ListFilter using a data store (rather than a hardcoded list) as covered here in the 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:
    Code:
    // 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:
    Code:
    {
    header: 'Level',
    dataIndex: 'levels',
    width: 160,
    sortable: true,
    filter: {
        type: 'list',
        store: levelStore
    }

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    The store returns with data but the list isn't updated?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    I've been debugging, no luck yet. The store never gets loaded. This is from Ext.ux.grid.menu.ListMenu which is a supporting class of FilterList.

    Code:
        /**
         * Lists will initially show a 'loading' item while the data is retrieved from the store.
         * In some cases the loaded data will result in a list that goes off the screen to the
         * right (as placement calculations were done with the loading item). This adapter will
         * allow show to be called with no arguments to show with the previous arguments and
         * thus recalculate the width and potentially hang the menu from the left.
         */
        show : function () {
            var lastArgs = null;
            return function(){
                if(arguments.length === 0){
    console.log('arguments.length === 0');
    console.log(arguments);
    console.log(this.loadOnShow);
                    this.callParent(lastArgs);
                } else {
                    lastArgs = arguments;
                    if (this.loadOnShow && !this.loaded) {
    console.log('really loading');
                        this.store.load();
                    }
                    this.callParent(arguments);
                }
            };
        }(),
    The arguments always === 0. Even though loadOnShow = true

    If I force the store to load by commenting out the "arguments.length === 0" constraint I get good results when I first mouseover the "Filters" menu option, everything is visible, I check one and it does the right ajax call, etc. But if I mouse off the filter option and mouse on again the whole option list is a thin 200px wide by 5px tall element at the top of screen.

    From the debugging I also discovered that I needed one column of my ListFilter store to explicitly be named "id" and I needed to include the "valueField:" config (to define the column of the store that I want to show as text next to the checkboxes) along with the rest of my filter config options. Like this:

    Code:
    // store
    var levelStore = Ext.create('Ext.data.Store', {
        fields: ['name', 'id'],
        proxy: {
            type: 'ajax', 
            url: '../json?queryName=levels',
            reader: 'json'
        },
        autoLoad: true
    });
    
    // column from column model
    {
    header: 'Level',
    dataIndex: 'levels',
    width: 160,
    sortable: true,
    filter: {
      type: 'list',
      store: levelStore,
      phpMode: true,
      labelField: 'name'
    }
    }

  4. #4

    Default

    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):

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

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

  5. #5
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293

    Default

    Hi!
    This can be solved by fixing show method:
    Code:
    Ext.override(Ext.ux.grid.menu.ListMenu,{
            show : function () {
                var lastArgs = null;
                return function(){
                    if(!arguments){
                        this.callParent(lastArgs);
                    } else {
                        lastArgs = arguments;
                        if (this.loadOnShow && !this.loaded) {
                            this.store.load();
                        }
                        this.callParent(arguments);
                    }
                };
            }()
        });
    For filter , configure it like this:
    Code:
    filter: {
                    type: 'list',
                    labelField: 'name', //label field in your JSON, defaults to text
                    store: filterListStore //store You want to use
                }
    Sample data from the server:
    Code:
    [{"id":"small","name":"small"},{"id":"large","name":"large"}]

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    30

    Default

    This didnt work for me.. getting a TypeError: k.fireFn.apply is not a function

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •