Local Dynamic Grid Filtering

[chrwjr]

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.

[mitchellsimoens]

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:


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

[chrwjr]

Excellent. Thanks so much, Mitchell. :)

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

[sekaijin]

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.

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

[sekaijin]

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

[schmoboy]

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"?