ExtJS 4 ComboBox AutoComplete

Question

I have an extjs combobox used for auto-complete having following configuration:

xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true

There are two issues being faced by me:

a. If a user chooses a value from the list returned from server, but later wants to remove that value and keep combo-box empty, then also the old values re-appears on blur, not allowing combo-box to remain empty. How can I allow empty value in this combo-box in such a case? I understand it could be due to forceSelection:true, but then I need to keep it true as otherwise user can type any random value.

b. When the server returns an empty list, I want to display a message - No Values Found. I tried doing this, by putting this value in the displayField entity, i.e., {id:'', name:'No Value Found'}. But then in this case, the user is able to choose this value and send it to server which is not what is expected. Thus, how can I display the message for empty list?

Could someone please throw light on this?

Answer 1

For the issue related to forceSelection in the question above, following is the hack created which can serve the expected purpose:

Ext.override(Ext.form.field.ComboBox,{          
    assertValue: function() {
        var me = this,
            value = me.getRawValue(),
            rec;
        if (me.multiSelect) {
            // For multiselect, check that the current displayed value matches the current
            // selection, if it does not then revert to the most recent selection.
            if (value !== me.getDisplayValue()) {
                me.setValue(me.lastSelection);
            }
        } else {
            // For single-select, match the displayed value to a record and select it,
            // if it does not match a record then revert to the most recent selection.
            rec = me.findRecordByDisplay(value);
            if (rec) {
                me.select(rec);
            } else {
                if(!value){
                    me.setValue('');
                }else{
                    me.setValue(me.lastSelection);
                }
            }
        }
        me.collapse();
    }
});

This needs to be included after library files of extjs have been included.

For the other issue of message to be shown at No Values Found - emptyText - works fine as suggested by Varun.

Hope this helps somone looking for something similar.

Answer 2

I've done this for Ext JS 3.3.1. I don't know if they apply to Ext JS 4, though I guess they should.

For the first problem, set autoSelect : false. autoSelect is by default set to true. This will work only if allowBlank : true is set. From the docs

true to select the first result gathered by the data store (defaults to true). A false value would require a manual selection from the dropdown list to set the components value unless the value of (typeAheadDelay) were true.

For the second problem, use listEmptyText. From the docs

The empty text to display in the data view if no items are found. (defaults to '')

Cheers.