a. If a user chooses a value from the list, 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?

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?

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

Code:

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('');
me.select(value);
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});

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

For your first question, the easiest way is to add an extra entry to your store that is blank. Alternatively you could try overriding assertValue() with your own implementation. Take a look at the source code for details.

For the second issue, I'd probably do that by completely hiding the combobox and showing some text in its place. Or you could try disabling it.

As both the issues are similar and pertaining to auto-complete, hence have been posted together under one question.

Originally Posted by skirtle

For your first question, the easiest way is to add an extra entry to your store that is blank.

This is the way we had been thinking about. Thanks for confirming, but I was just wondering if there is any other more elegant way of doing this. Though, will continue using the same currently until something else found or created, and will give a try to assertValue().

As for the second thing:

Originally Posted by skirtle

For the second issue, I'd probably do that by completely hiding the combobox and showing some text in its place. Or you could try disabling it.

Doing this could be a bit wierd, as how the user would be able use the combobox again then?

May be for this too, we need to filter the value behind message 'No Match Found' at the server side.

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?

Succeeded in this by using emptyText under listConfig. Hope this proves to be of help for someone.

Hack related to forceSelection

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

Code:

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('');
me.select(value);
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});

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