EXTJS: Disable required object validation on load

For one of my applications, I have a combo box. The combo box contains a list of values. This should be present on save. 

So, to put it simply, I added allowBlank: false to the combobox.

But on load, the field is validated and since it is empty, then it is shown having an error. This is usually not a good experience for users.

This is what that can be done to fix the issue:

1. Add a label separator as * for the users to understand that this is a mandatory field. 


2. On save, check for the availability of the combo box value.

 if (this.getComboBoxObject().getValue() != null && this.getComboBoxObject().getValue() != "") {  
      // do required operation  
 } else {  
      this.getComboBoxObject().markInvalid("Missing required field(s)");  
      return;  
 }  

 return  

will prevent any further processing on the method.

On click of Save/Submit button in the page, 





this is how the combo box would be validated. The same logic can be applied to any object in the form.

Happy coding :).