ExtJs: Field width Error Message

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>