ExtJS 4 Combo-Box autocomplete issues

[netemp]

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, 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?


Could someone please throw light on this?


Thanks in advance.

[skirtle]

Please post separate questions in separate threads.

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.

[netemp]

Thanks for the answer Skirtle.

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

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:

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.

Thanks for your time again.

[netemp]

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.

[skirtle]

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

Yeah, sorry, misunderstood the question.

[netemp]

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

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


Hope this helps somone looking for something similar.