Changing the location where validation errors are displayed

A popular way to display validation errors is to place an error icon to the side of the invalid fields As shown in the next screenshot, this recipe uses a login form to explain how to implement this technique.

How to do it...

1. 1. Initialize the QuickTips singleton:

   Ext.QuickTips.init();
   

2. 2. Create the login form:

   var loginForm = { xtype: 'form',
   id: 'login-form',
   bodyStyle: 'padding:15px;background:transparent',
   border: false,
   url:'login.php',
   items: [
   { xtype: 'box',
   autoEl: { tag: 'div',
   html: '<div class="app-msg"> <img src="img/magic-wand.png" class="app-img" />Log in to The Magic Forum</div>'
   }
   },
   { xtype: 'textfield', id: 'login-user',
   fieldLabel: 'Username',
   allowBlank: false, minLength: 3, maxLength: 32,
   msgTarget:'side'
   },
   { xtype: 'textfield', id: 'login-pwd',
   fieldLabel: 'Password',
   inputType: 'password', allowBlank: false, minLength: 6,
   maxLength: 32, minLengthText: 'Password must be at least 6 characters...