Results 1 to 6 of 6

Thread: Local Dynamic Grid Filtering

  1. #1
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    11

    Default Answered: Local Dynamic Grid Filtering

    OK, I have been spinning my wheels for about 3 days on this issue. I have an application that allows the end-user to select a business customer from a drop down list (combo list) and it displays detail data associated with that customer in a grid. I have added the grid filtering to the column headings. So for example, the "Status Description" field might consist of 10 known statuses and the end-user can filter the data accordingly. It all works well. However, when it comes to the "State Code", a given customer might only do business in 12 states, not all 50. Different customers do business in different combinations of states. So I would like to dynamically regenerate the filter options on the select event of the combo box (locally).

    It seems as though I can instantiate the filters thusly:

    // Static seeding of filter options:
    col_property_state.filter = {
    type: 'list',
    options: ['AK','AL','AR','AZ','CA','CO','CT','DC','DE','FL','GA']
    // , phpMode: true
    };

    And that works fine. But this does not:

    // Dynamic seeding of filter options:
    var states = new Array();
    for (var i = 0; i < store.getCount(); i++) {
    var mystate = store.getAt(i).get("property_state");
    for (var j = 0; j < states.length; j++) {
    if (states[j] == mystate) break;
    }
    if (states[j] != mystate) states.push(mystate);
    }
    var col_property_state = Ext.ComponentManager.get('col_property_state');
    col_property_state.filter = {
    type: 'list',
    options: states
    // , phpMode: true
    };
    col_property_state.filterable = true;

    Two issues here:

    1.) According to the 4.0 documentation on Ext.ux.grid.filter.ListFilter, "options" can be a string, object or array. Here it is an array, but not working. I have dumped it to a string and tried to no avail. I have tried to specify options: [states] and options: states etc. My console log shows that the array is properly populated.

    2.) Secondly, if I instantiate statically, it works fine, but if I then try to change the options element on a combo select event, it ignores the new options. Seems like it should do a destroy or clearFilter of the existing filter and create a new one or update the existing one then fire "updateColumnHeadings()".

    Any assistance would be helpful. Thank you.

  2. What you have to do is get the store that is created. You need to remember that the menu isn't created until the header menu is created which isn't until you tap on the header.

    Using the grid filtering example that comes with the framework, after the menu was created I quickly did this to update the list:

    Code:
    var size  = grid.filters.filters.items[4], //have to find which one you need
        menu  = size.menu,
        store = menu.store;
    
    store.add({
        id   : 'TEST',
        text : 'TEST'
    });
    
    //list menu listens to load, not datachanged
    store.fireEvent('load', store, menu.store.data.items);

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

    Default

    What you have to do is get the store that is created. You need to remember that the menu isn't created until the header menu is created which isn't until you tap on the header.

    Using the grid filtering example that comes with the framework, after the menu was created I quickly did this to update the list:

    Code:
    var size  = grid.filters.filters.items[4], //have to find which one you need
        menu  = size.menu,
        store = menu.store;
    
    store.add({
        id   : 'TEST',
        text : 'TEST'
    });
    
    //list menu listens to load, not datachanged
    store.fireEvent('load', store, menu.store.data.items);
    Mitchell Simoens @LikelyMitch

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

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

  4. #3
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    11

    Default

    Excellent. Thanks so much, Mitchell.

    I also used a store.removeAll() to reset the filter, before store.add.

  5. #4
    Sencha User
    Join Date
    Feb 2008
    Posts
    105

    Default

    it does not work.
    from the example of MVC Sencha, I added a filter on the first column.

    I want the names to be synchronized with the data of the table.

    I tried to apply the code above item after layaout after render the grid, but the filters are still not created.

    so I can apply this code.

    so I tried to define my own store and give the filter in the conf. but there ListMenu does not verify that the datastore is already loaded and do not take into account the content.

    so I put autoLoad to false. I am therefore forced to find an event to load the data.
    and I fall on either dice survienent events that occur too early. filters are not created, too late and loading of data store regenerates the menu and relaunch the same event.
    I then went into an endless cycle.
    Code:
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux');
    Ext.require([
        'Ext.ux.grid.FiltersFeature',
    ]);
    Ext.define('AM.view.user.List' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.userlist',
    
        title : 'All Users',
        store: 'Users',
        features: [{
            ftype: 'filters',
            // encode and local configuration options defined previously for easier reuse
            encode: false, // json encode the filter query
            local: true,   // defaults to false (remote filtering)
        }],
        
        initComponent: function() {
            this.menustore = Ext.create('Ext.data.Store', {
                //autoLoad: true,
                model: Ext.define('UserMenu', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'text', type: 'string'}
                ]
            }),
            proxy: {
                type: 'ajax',
                api: {
                    read: 'data/usersnames.json'
                },
                reader: {
                    type: 'json',
                    root: 'users',
                    successProperty: 'success'
                }
            }
            });
    
            this.columns = [
            {header: 'Name',  
            dataIndex: 'name',  
            filter: {
                type: 'list',
                //options: ['Ed', 'Tommy']
                store: this.menustore
                //,phpMode: true
                },
                
            flex: 1
            },
            {header: 'Email', dataIndex: 'email', filterable: true, flex: 2}
            ];
    
            this.callParent(arguments);
        },
        listeners: {
            render: {
                scope : this,
                fn: function(grid){ 
                    console.log('event');
                    grid.menustore.load();
                }
            }
        }
    });
    A+JYT

  6. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    105

    Default

    Sorry

    this is an error
    I've ext-4.1.0 and ext-4.0.7
    I'm running version 4.1.0 but I pointed it on the back of the 4.0.7 ux

  7. #6
    Sencha Premium Member
    Join Date
    Oct 2009
    Posts
    23
    Answers
    3

    Default

    Mitchell, you say "after the menu was created I quickly did this to update the list"

    What grid event are you listening to to arrive at "after the menu was created"?

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
  •