ComboBox Store filters twice on first click

[mdavis6890]

**Moved from bugs forum***

I've got an 'expand' listener on my combobox that I want to use to filter the store. Unfortunately, the store seems to filter or load twice on the first click, once the way it's supposed to and a second time with no filter. Subsequent clicks filter properly.

Ext.define('Test', {
    extend : 'Ext.data.Model',
    fields : [{name : 'fname', type : 'string'}]
});
Ext.create('Ext.form.field.ComboBox', {
    renderTo : Ext.getBody(),
    store : Ext.create('Ext.data.Store', {
        model : 'Test',
        data : [{fname : 'Michael'}, {fname : 'Jeffrey'}],
        listeners : {
            'datachanged' : function (store) {
                console.log(store.getCount());
            }
        }
    }),
    valueField : 'fname',
    displayField : 'fname',
    queryMode : 'local',
    listeners : {
        expand : function (picker) {
            var store = picker.getStore();
            store.filter('fname', 'Michael');
        }
    }
}); 

So what can I do to make this work right? I've spent many hours to get to this point, and any suggestions would be greatly appreciated.

[skirtle]

See:

http://docs.sencha.com/ext-js/4-0/#!...erty-lastQuery

I think you need to add lastQuery: '' to your config. Whilst this is documented I must say it's always felt like a bug to me.

[mdavis6890]

I'm almost literally in tears right now. I have spent dozens of hours on this in pursuit of a nice, clean and very generalized linked-combo plugin. I think I finally have it.

Must run now, but I'll post my plugin later once I know it's working properly.

Thanks!!

[mdavis6890]

Ext.define('IDB.selectbox.LinkedComboPlugin', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.linkedcombo',
    /*    Must pass object like    {
        comboId : 'myLinkedCombo',
        thisField : 'thisField',
        thatField : 'thatField'
    }    */
    linkedCombo : undefined, // Configuration object that looks like above
    combo : undefined, // The combo attached to this plugin

    getLinkedCombo : function () {
        return Ext.ComponentQuery.query('#' + this.linkedCombo.comboId)[0];
    },

    getLinkedRecord : function () {
        var lc = this.getLinkedCombo(),
              store = lc.store,
              linkedRecord = store.findRecord(lc.valueField, lc.getValue(), 0, false, true, true);
        return linkedRecord;
    },

    onComboExpand : function (picker, eOpts) {
         var lc = this.getLinkedCombo(),
               record = this.getLinkedRecord(),
               filterValue,
               filterStore = picker.getStore(),
               remoteField = this.linkedCombo.thatField,
               filterProperty = this.linkedCombo.thisField;

          if (record) {
            filterValue = record.get(remoteField);
            filterStore.clearFilter();
            filterStore.filter([{
                property : filterProperty,
                value : filterValue,
                exactMatch : true
            }]);
          }
    },
    init : function (combo) {
        this.combo = combo;
        Ext.apply(combo, {
            lastQuery : ''
        });

        // Filter this combo on expand event, based on value of linked combo.
        combo.on('expand', this.onComboExpand, this);

        // When the linked combo is changed by the user, clean this combo's value.
        combo.mon(this.getLinkedCombo(), 'select', function () {
            combo.clearValue();
            combo.fireEvent('select');
        }, this);
    }
});