ExtJS comboboxes and filtered store

Question

I'm having issues running an ExtJS 4.1 combobox with a store that I've pre-filtered in that it is just clearing the filter and displaying all data.

I understand that the problem I'm encountering is due to the combobox clearing the filter and applying its own (a bit annoying, as it's not what you'd immediately expect from a combobox), but I'm unsure about the best way to get it to stop.

I'm currently (trying) to use the MVC model with some AJAX-style stores defined in separate store files, a model which has the store defined in it's stores array and the view in it's views array, calls

    var targetStore = this.getStore('app.store.STargets');
    targetStore.filter('SOURCE', 'X');
    targetStore.load();

as part of it's init function

and a combobox in a view that references the controller-defined store in it's store config variable.

xtype: 'combobox',
flex: 75,
fieldLabel: 'Target',
name: 'TargetId',
itemId: 'targetIdCombo',
store: 'app.store.STargets',
valueField: 'SYSID',
displayField: 'DISPLAY_NAME',
//typeAhead: true,
queryMode: 'local', 
triggerAction: 'all',
lastQuery: '',
emptyText: 'Select a target',
margin: '0 5 0 0',
listeners: {
    scope: this,
    change: function () {
        this.fireEvent('targetChanged'); // probably needs on select
        },
        beforequery: function(qe){
            // qe.query = qe.query +'&SOURCE=X'
            // delete qe.combo.lastQuery;
            // delete qe.combo.allQuery;
        }

According to the documentation, you're meant to do something with either lastQuery or the beforequery event, though it's not massively clear what. I assume blanking the inner-querying would also stop it reducing the numbers of items in the combobox as you type which isn't great, and ideally I'd want to maintain this functionality but still have my store filtered to show only records with SOURCE='X'. I can confirm that my store is filtered on load, as my data array is longer than my store.getCount()

From web examples I've tried:

the two delete qe.combo statements in the beforequery - result = no filtering at all
setting lastQuery to '' - result = no filtering at all
adding triggerAction: 'all' - result = no filtering at all

I've also considered messing with allQuery in combination with triggerAction all to try to filter by SOURCE there, but that smacks of the view getting too much business logic, and likewise having the controller hunting for comboboxes to flick a query increases coupling of the view and controller.

Another suggestion that I saw was for there to be a copy store to be made from the pre-filtered dataset. This makes sense, and should keep the desired filter-on-typing behaviour, but as a relative Ext and JS beginner I'm not sure how I'd be able to refer to a controller-created store from my view, as the examples I see use the stores array which are all previously defined stores (or whether I'm meant to create the copy in my view from the filtered store)

Matt Allwood Matt Allwood · Accepted Answer · 2016-03-14T11:32:34

It appears I was applying the filter too early.

the init function of the Controller was being called pretty much at application start and was setting the filter of the store as expected.

By the time I had navigated to my view, however, some other code had cleared the filter from my store, so the combo box was displaying the unfiltered list again.

To correct this, I instead bound my filtering code to the 'afterrender' event of the view.

i.e. instead of

Controller.js
init: function () {
  ...
  var targetStore = this.getStore('app.store.STargets');
  targetStore.filter('SOURCE', 'X');
}

I now have:

Controller.js
init: function () {
         this.control(
           {
           'viewitemid': {
                afterrender: function(){
                    var targetStore = this.getStore('app.store.STargets');
                    targetStore.filter('SOURCE', 'X');
                }
           });
      }

This now filters my combo box as expected and the filter is not cleared

ExtJS comboboxes and filtered store

1 Answers