How to filter a combox box when editable is set as false

Question

Hi I have a combo box like these

               var combo = new Ext.form.ComboBox({
                        store: store,
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        editable:false,
                        forceSelection: true,
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        renderTo:document.body

                    });

When it make editable as true and when i type in the combo field ,the list is getting filter according to the entered characters.

I want to achieve the same when the config editable is set as false.

Answer 1

Try This following code:

Ext.onReady(function(){
Ext.namespace('Ext.exampledata');
Ext.exampledata.states = [
    [ 'Alabama' ],
    [ 'Alaska' ],
    [ 'Arizona'],
    [ 'Arkansas' ],
    [ 'California'],
    [ 'Colorado'],
    [ 'Connecticut'],
    ['Delaware'],
    [ 'District of Columbia'],
    [ 'Florida'],
    [ 'Georgia'],
    [ 'Hawaii'],
    [ 'Idaho'],
    [ 'Illinois'],
    [ 'Indiana'],
    [ 'Iowa'],
    [ 'Kansas'],
    [ 'Kentucky'],
    [ 'Louisiana'],
    [ 'Maine'],
    [ 'Maryland'],
    ['Massachusetts'],
    [ 'Michigan'],
    [ 'Minnesota'],
    [ 'Mississippi'],
    [ 'Missouri'],
    ['Montana'],
    [ 'Nebraska'],
    [ 'Nevada'],
    [ 'New Hampshire'],
    [ 'New Jersey'],
    [ 'New Mexico']

];

var store = new Ext.data.ArrayStore({
    fields: ['state'],
    data : Ext.exampledata.states 
});
                    var combo = new Ext.form.ComboBox({
                        store: store,
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        editable:false,
                        forceSelection: true,
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        listeners: {
                             'keyup': function(field,event) {
                                  var key = String.fromCharCode(event.getKey());
                                  var filter=/^[a-zA-Z]+$/;
                                  var test_bool = filter.test(key);
                                  if(test_bool==true){
                                      combo.clearValue();
                                      combo.doQuery(key);
                                  }
                             },
                            'expand':function(combo){
                              combo.clearValue();
                             }
                         },
                        renderTo:document.body

                    });
});