ExtJS ComboBox Hidden Field Issues

As you might already know, despite looking like a typical select box, Ext.form.ComboBox doesn’t behave exactly as you would expect since it submits the display text instead of the option value. The documentation states:

A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is that to submit the valueField, you must specify a hiddenName to create a hidden input field to hold the value of the valueField. The displayField is shown in the text field which is named according to the name.

this.add([
	{
		xtype: 'combo',
		name: 'suffix',
		hiddenName: 'suffixId', // post this name
		hiddenValue: 0, // default value
		fieldLabel: 'Suffix',
		mode: 'local',
		store: this.suffixStore,
		valueField: 'key',
		displayField: 'display',
		triggerAction: 'all',
		forceSelection: true,
		allowBlank: true
	}
]);

Adding a hiddenName and a default value in hiddenValue does the trick, the default value (0) is set in the hidden field until a user chooses a different value. Unfortunately this breaks when the ComboBox is set to allow blanks and the user tabs over the field. When this happens, the hiddenValue is set to a null string and the user is never prompted to select a value.

Upon form submission, the hiddenField (suffixId) will be set to neither the default nor a valid value.

One solution is to listen for the focus and blur events to reset the value of the hidden field when it has been set to a null string.

this.add([
	{
		xtype: 'combo',
		name: 'suffix',
		hiddenName: 'suffixId',
		hiddenValue: 0,
		fieldLabel: 'Suffix',
		mode: 'local',
		store: this.suffixStore,
		valueField: 'key',
		displayField: 'display',
		triggerAction: 'all',
		forceSelection: true,
		allowBlank: true,
		listeners: {
			'focus': this.handleSuffixChange,
			'blur': this.handleSuffixChange,
			scope: this
		}
	}
]);

handleSuffixChange: function(field) {
	if (field.value=='') {
		field.hiddenField.value = '0';
	}
}

Upon form submission you will be guaranteed a valid value, which is especially beneficial if you’re using the form values to populate a server side bean object.