PDA

View Full Version : ComboBox: Making it optional (empty), and forcing only selection list



ChrisOhB
28 Feb 2013, 8:20 PM
Let's say I have a combobox. I can't seem to figure out the right combination of config settings.
Ext.widget({ xtype: 'combo',
renderTo: Ext.getBody(),
fieldLabel: 'Neighborhood',
store: ['Ballard', 'Fremont', 'Interbay', 'Queen Anne'],
// TODO
});
What I'd like to do is make the field optional (can be empty), but if there is a value in the text field, then it has to be a value from in the list.

It can be typed in or selected from the list. If a user types in a value in the list or selects one from the list, the user should then be able to go back to the field and delete the text to clear the field, leaving it empty.

Here's what I tried:
Ext.widget({
xtype: 'combo',
renderTo: Ext.getBody(),
fieldLabel: 'Neighborhood',
store: ['Ballard', 'Fremont', 'Interbay', 'Queen Anne'],
forceSelection: true,
allowBlank: true
});
It didn't work. The "forceSelection: true" appears to restore the last selection if I choose a list item, then delete the field text and cause a blur on the field. I thought "allowBlank: true" would allow for the field value to be deleted, without invoking the behavor of "forceSelection." Apparently not.
Is there no way to make the combo act like an optional <select>?

sword-it
28 Feb 2013, 10:41 PM
Hi ChrisOhB,

Use "typeAhead : true" config, like -


var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});


Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
forceSelection:true,
typeAhead:true,
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});


For more information read API docs - http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-typeAhead

ChrisOhB
1 Mar 2013, 6:56 AM
Thanks for the reply. Unfortunately, I still cannot leave the field blank after selecting a value. For example:

http://jsfiddle.net/bmsLn/

Go to that link and try to delete the value without having the combo restore its value afterward. I don't see how to do this.

Am I missing something? What key strokes or mouse actions do I need to perform to delete the value out of one of those text boxes in the link without causing the value to be restored after I delete the text?

Just to clarify the requirements:
1. No text is required in the field
2. But if there is text, it must be a selection (match the value of) an item in the list.
3. If user enters texts or makes selection, the user should be able to leave the field, then come back and blank it out. (Same thing is 1.)

Does that make sense?

scottmartin
1 Mar 2013, 7:42 AM
You will need to insert an 'empty' entry to the store .. so it can deselect.

Scott.

ChrisOhB
1 Mar 2013, 10:39 AM
Ah, that's the key, Scott! Thanks--it beats my workaround:

assertValue: function () {
var rawValue = this.getRawValue(),
blankBefore = !Ext.String.trim(rawValue).length,
result = Ext.form.field.ComboBox.prototype.assertValue.apply(this, arguments),
blankAfter = !Ext.String.trim(this.getRawValue()).length,
restored = (blankBefore && !blankAfter);

if (this.forceSelection && !this.multiSelect && this.allowBlank && restored) {
this.setValue('');
}
}