app.js 1.7 KB

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