[SOLVED] EXTJS 4.2 - combobox resets when match is not found

EXTJS 4.2 - combobox resets when match is not found

The typeahead works fine if the words match, however if an incorrect character is entered, thus no match then all the text entered vanishes.

For example,

Audi - type ahead works and finds Audi.

Au - type ahead works and finds Audi.

Aux - type ahead finds no text but blanks the combobox text that was entered, therefore I cannot backspace x and resume my search.

Question:

1) Any ideas on how to fix this? My research so far is pointing to the afterQuery function but nothing definitive so far.

2) Is it possible to override the typeahead and use a custom filter instead? (This would be my preferred option)

Here is the code….

Ext.require(['*', 'Ext.ux.data.PagingMemoryProxy']);


Ext.define('Filter.data.Store', {
    extend: 'Ext.data.Store',
    id: 'carsStore',
    autoLoad: true,
    fields: ['name'],
    pageSize: 3,
    remoteFilter:true,
    proxy: {
        type: 'pagingmemory',
       // url: 'data.json',
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});


Ext.onReady(function() {
var itemsPerPage = 4, 
    data = {
        "total": 6,
        "items": [{
            'name': 'Ford'
        }, {
            'name': 'GM'
        }, {
            'name': 'VW'
        }, {
            'name': 'Audi'
        }, {
            'name': 'Ferrari'
        }, {
            'name': 'McLaren'
        }]
    },
    store = Ext.create('Filter.data.Store',{
        data:data
    });

    store.load();

Ext.create('Ext.grid.Panel', {
    title: 'ComboBox TypeAhead Issue',
    store: store,
    columns: [{
        header: 'Name',
        dataIndex: 'name'
    }, ],
    width: 700,
    height: 150,
    dockedItems: [
              {        
        xtype: 'combobox',
        width: 7,
        hidden: false,
        store:  store,
        fieldLabel: 'name',
        pageSize: true,         
        displayField: 'name',
        valueField: 'name',
            forceSelection: true,
            editable: true,
            typeAhead: true,
            queryMode: 'local',
       }],
    renderTo: Ext.getBody()
});

});

Solution