Web page performance is critical to keeping customers and visitors moving along on your site. Slow responses typically result in frustrated users, unhappy customers and worse, abandoned orders. It is important to reduce the number of requests generated by a web page in order to increase its actual and perceived performance.
One critical way is to reduce the number of external files loaded by a page. Another one is to reduce their size through compression. This post aims to take this concept a step further by automating this tedious process using open-source libraries.
[click to continue…]
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.