Recently i found the top support tip from Kevin Cassidy.
while Using the application have you ever wanted the validation messages under our Form field( ex: Config Option as msgTorget:'under'). But the message will appear to the only out input field not to the completed entire width of the field.
new Ext.form.field.Number({
fieldLabel: 'Budget',
allowBlank: false,
width: 170,
margin: 50,
msgTarget: 'under',
renderTo: Ext.getBody()
});
Basically it will render like this
We need to add the CSS class config option. to number filed.
cls: 'full-width-error'
Override CSS class will be
<style>
.full-width-error .x-form-error-wrap-under-side-label::before {
display: none !important;
}
.full-width-error .x-form-error-wrap-under .x-form-error-msg {
display: block !important;
width: 170px !important;
}
</style>