Specifying the required fields in a form

This recipe uses a login form as an example to explain how to create required fields in a form.

How to do it...

1. 1. Initialize the global QuickTips instance:

   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
   },
   { xtype: 'textfield', id: 'login-pwd',
   fieldLabel: 'Password',
   inputType: 'password',allowBlank: false
   }],
   buttons: [{
   text: 'Login',
   handler: function() {
   Ext.getCmp('login-form').getForm().submit();
   }
   },
   {
   text: 'Cancel',
   handler: function() {
   win.hide();
   }
   }]
   }
   

3. 3. Create the window that will host the login form:

   Ext.onReady(function() {
   win = new Ext.Window...