Combobox should filter a store, but not its own

[DennisFLS]

Hi there,

for an application, I want to use several comboboxes that are filled with their corresponding stores upon app start. Let's say I got two comboboxes and two stores for "teams" and "areas". These comboboxes should be displayed on top of my application and can be used to set a filter for the two stores whenever the user wants to, regardless of the current tab that is active.

Technically, this works - my controller listens for the comboboxes change-event and filters the store. The problem is that if a filter is applied to the store, the combobox removes this item from its list.

I know, this is not a fault but by design, but is there any option or any plugin that I can use to make the combobox use the unfiltered store? I don't want to "copy" my stores and let the comboboxes work with these copies because I would have to synchronize each of them (i.e. if I add a team in one store, it has to be added to the other).

Thanks in advance :)

[scottmartin]

This issue is that you are filtering the store and bound to it .. you could make the combo stores an array and they simply place a load listener on the main store to use loadData(records) to update the combo's array store.

Scott.

[DennisFLS]

Thanks for the hint, got on the right track after reading it.

At first, I extended Ext.data.Store to give its contents as an array:


getAsArray: function( keyField, valueField ) {
var me = this,
a = [];

for ( var i = 0; i < me.getCount(); i++ ) {
a.push( [ me.getAt( i ).get( keyField ), me.getAt( i ).get( valueField ) ] );
}

return a;
}

So, for records like usergroups with the properties id and name (my stores have more properties so I had to include the keys as parameters) I can build my combobox like this ("this" refers to my current view):


{
xtype: 'combobox',
name: 'filterGroups',
fieldLabel: 'Groups',
editable: false,
displayField: 'Name',
multiSelect: true,
queryMode: 'local',
store: myApp.getUserGroupsStore().getAsArray( 'id', 'name' ),
emptyText: 'all',
valueField: 'id',
listeners: {
change: function( combobox, value ) {
this.fireEvent( 'filterselectionchanged', combobox, value, this.initialConfig.valueField );
}
}
},


My FilterController listens for the event and applies the filter for the given key. Because I want to be able to filter several stores by several keys AND several stores by the same key, I had to combine the filter criterias in a loop when the event got fired. I still have to make sure that the combobox reads changes that have been made to the store though...

It seems like a pretty dirty solution to me, but it works as expected :)