Search code examples
extjsextjs3

Auto selection issue with onLoad() in extjs


I am using listner beforequery to filter a combobox. everything is fine while filtering, but i am facing one issue like:

when we enter desired characters in combobox to filter they are being selected automatically ..so when we want to enter new character we have to press right side arrow to remove selection or else remaining characters are being deleted... please help why this behaviuor.

Code:

xtype: 'combo',
            fieldLabel: 'Label',
            anchor: '100%',
            enableKeyEvents: true,
            allowBlank: false,
            displayField: 'value',
            store: 'level1Store',
            lazyInit: false,
            mode: 'local',
            forceSelection: true,
            disableKeyFilter: true,
            editable: true,
            triggerAction: 'all',
            valueField: 'key',
            name: 1,
            ref: 'combo1',
            id: 'field1'

Listner code to filter:

Ext.getCmp('field1').addListener({
        beforequery: function (e) {
            if (e.query && e.query.indexOf('?') != -1) {
                e.cancel = true;
                var query = new RegExp(String.format('^{0}', e.query.replace(/\?/g, '[A-Za-z0-9]')));
                this.onLoad();
                this.store.clearFilter(true);
                this.store.filter(this.displayField, query);
            }
        }
    });

Solution

  • you can do 2 things:

    1) you can override this default behaviour with your custom required one.

    2) you can listen to the focus event of the combo and deselect the text.