docs/guides/forms/examples/submit/app.js

   1 /**
   2  * @example Form Submission
   3  *
   4  */
   5 Ext.require('Ext.form.Panel');
   6 Ext.require('Ext.form.field.Date');
   7
   8 Ext.onReady(function() {
   9     Ext.create('Ext.form.Panel', {
  10         renderTo: Ext.getBody(),
  11         title: 'User Form',
  12         height: 150,
  13         width: 280,
  14         bodyPadding: 10,
  15         defaultType: 'textfield',
  16         // The form will submit an AJAX request to this URL when submitted
  17         url: 'data/add_user',
  18         items: [
  19             {
  20                 fieldLabel: 'First Name',
  21                 name: 'firstName'
  22             },
  23             {
  24                 fieldLabel: 'Last Name',
  25                 name: 'lastName'
  26             },
  27             {
  28                 xtype: 'datefield',
  29                 fieldLabel: 'Date of Birth',
  30                 name: 'birthDate'
  31             }
  32         ],
  33         buttons: [
  34             {
  35                 text: 'Submit',
  36                 handler: function() {
  37                     var form = this.up('form').getForm(); // get the basic form
  38                     if (form.isValid()) { // make sure the form contains valid data before submitting
  39                         form.submit({
  40                             success: function(form, action) {
  41                                Ext.Msg.alert('Success', action.result.msg);
  42                             },
  43                             failure: function(form, action) {
  44                                 Ext.Msg.alert('Failed', action.result.msg);
  45                             }
  46                         });
  47                     } else { // display error alert if the data is invalid
  48                         Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
  49                     }
  50                 }
  51             }
  52         ]
  53     });
  54
  55 });