1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Answered: ExtJS 4 Combo-Box autocomplete issues

    Answered: ExtJS 4 Combo-Box autocomplete issues


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


    Code:
            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.

  2. 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.


    Hope this helps somone looking for something similar.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,611
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Thanks for the answer Skirtle.

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

    Quote Originally Posted by skirtle View Post
    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:

    Quote Originally Posted by skirtle View Post
    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.

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Quote Originally Posted by netemp View Post
    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.

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,611
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Doing this could be a bit wierd, as how the user would be able use the combobox again then?
    Yeah, sorry, misunderstood the question.

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      1  

    Default Hack related to forceSelection

    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.


    Hope this helps somone looking for something similar.