Friday, 20 November 2015

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

            .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;