extjs 4.2 combobox show only unique entries for store

Question

This is not the only time someone has asked about this. Basically I want to know how to filter the store for a combobox. I know that the store has a collect method and using it works like this: store.collect('column') . The problem is that with a combobox at the time the combo is initially set the store has yet to have any data put in it. I read where someone else suggested that this be done in the beforequery listener (and in testing I can access the collect of the store at this point) the problem I have is how do I send the filtered store back to the combobox from the beforequery listener? And of course the code example looks like this: (some things will be changed to avoid showing information we don't want to give out)

xtype: 'combobox'
, multiSelect: true
, forceSelection: true
, store: IH.reportGroupStore
, displayField: 'group'
, valueField: 'group'
, fieldLabel: "Show group(s)"
, labelWidth: 110
, labelAlign: 'right'
, labelStyle: 'white-space: nowrap;'
, width: 275
, emptyText: 'All'
, listeners: {
    beforequery: function(me, opts) {

    }
    , blur: function(me, opts) {
        filterReportSummary();
    }
    , select: function(me, records, eOpts) {
        filterReportSummary();
    }
}

So inside of beforequery if I pause in the browser there I can do me.combo.store.collect('group') and see the collection. I know that to use the collection from a store.collect() I will have to remove displayField and valueField . I just don't know how to get it back to the combobox. I'm attempting to find a generic way to do this aside from creating a whole new store.

Any help or ideas will be greatly appreciated.

Answer 1

The simple answer to this is leave the combobox as is and use a separate store set up specifically for the list you are filtering against. In our example we are filtering a list of box numbers, we create an ArrayStore and populate the data with the collect method of the source store that is populating the grid. You must be careful to set the bypassFilter option to true to avoid the list from filtering when the list filters. The code for the ArrayStore looks like this:

boxArrayStore = Ext.create('Ext.data.ArrayStore', {
    storeId: 'boxArrayStore'
    , fields: ['box']
    , data: [[]]
    , load: function(){
        var parentStore = Ext.data.StoreManager.lookup('sourceStore');
        var arrayData = [];
        if(parentStore) {
            Ext.each(parentStore.collect('box', false, true), function(value) {
                arrayData.push([value]);
            });
            this.loadData(arrayData);
        }
    }
});

We are using load in the ArrayStore because the combobox is calling the load method of the ArrayStore every time you click the dropdown. As of now we may have to make some changes to this solution because if we bypass the filter we will not get a filtered list of boxes if you were, to example, filter by date as well. You would get all available boxes in the store even if they are not in that date range.