Twitter
Delicious
RSSExtJS ComboBox Hidden Field Issues
Mar 09
Ext JS, Tutorials Ext JS, Framework, JavaScript, Tutorials No Comments
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.
