app.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /**
  2. * @example Form Validation
  3. *
  4. */
  5. Ext.require('Ext.form.Panel');
  6. Ext.require('Ext.form.field.Date');
  7. Ext.onReady(function() {
  8. var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
  9. Ext.apply(Ext.form.field.VTypes, {
  10. // vtype validation function
  11. time: function(val, field) {
  12. return timeTest.test(val);
  13. },
  14. // vtype Text property: The error text to display when the validation function returns false
  15. timeText: 'Not a valid time. Must be in the format "12:34 PM".',
  16. // vtype Mask property: The keystroke filter mask
  17. timeMask: /[\d\s:amp]/i
  18. });
  19. Ext.create('Ext.form.Panel', {
  20. renderTo: Ext.getBody(),
  21. title: 'User Form',
  22. height: 200,
  23. width: 280,
  24. bodyPadding: 10,
  25. defaultType: 'textfield',
  26. items: [
  27. {
  28. fieldLabel: 'First Name',
  29. name: 'firstName'
  30. },
  31. {
  32. fieldLabel: 'Last Name',
  33. name: 'lastName'
  34. },
  35. {
  36. fieldLabel: 'Email Address',
  37. name: 'email',
  38. vtype: 'email'
  39. },
  40. {
  41. xtype: 'datefield',
  42. fieldLabel: 'Date of Birth',
  43. name: 'birthDate',
  44. msgTarget: 'under', // location of the error message
  45. invalidText: '"{0}" bad. "{1}" good.' // custom error message
  46. },
  47. {
  48. fieldLabel: 'Last Login Time',
  49. name: 'loginTime',
  50. vtype: 'time' // using a custom validation type
  51. }
  52. ]
  53. });
  54. });