5

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?

2 Answers 2

Reset to default
3

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.

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.

6
  • Hi Varun, Thanks for answering. autoSelect actually is highlighting the first entry in the list and not serving the purpose of removing the old value and allowing null. And for listEmptyText - I couldn't locate this config in ExtJS4 docs, may be it has been called off. So I tried both of them but couldn't get them to work in ExtJs 4 unfortunately, and still looking for some solution.
    – netemp
    Commented Sep 9, 2011 at 5:36
  • 2
    I just checked the docs, the listEmptyText can now be set through the listConfig's emptyText option. Try that. I haven't tried it myself. Check allowBlank property again.. That is the only config that will cause Issue 1.
    – Varun Achar
    Commented Sep 9, 2011 at 6:14
  • Hey Varun, thanks for the post. I confirm that emptyText under listConfig worked successfully. Thanks again. As for null value, I feel that forceSelection:true is overriding other options, thus, even if I do allowBlank:true, but there is no Null value present in the values list, then combo-box populates the old value back. One way of addressing this I feel can be of sending an empty record from the server side but unfortunately its not that elegant. Thanks for all your help so far.
    – netemp
    Commented Sep 9, 2011 at 6:32
  • Instead of doing that, just write a blur event on the combo and clear the valueField property whenever the combo.getRawValue() is null or empty.
    – Varun Achar
    Commented Sep 9, 2011 at 9:32
  • Thanks Varun, I tried with getRawValue(), but null or empty doesn't appear in it as a value ever. When value in combobox is removed, then also getRawValue() is returning the old value. Thus, on blur, its not getting possible to check what you mentioned. Thanks again for all help so far.
    – netemp
    Commented Sep 13, 2011 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.