ContactForm.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. Ext.define('Ext.app.ContactForm', {
  2. extend: 'Ext.form.Panel',
  3. requires: [
  4. 'Ext.data.ArrayStore',
  5. 'Ext.data.reader.Array',
  6. 'Ext.form.field.ComboBox',
  7. 'Ext.form.field.Date'
  8. ],
  9. formTitle: 'Contact Information (English)',
  10. firstName: 'First Name',
  11. lastName: 'Surname',
  12. surnamePrefix: 'Surname Prefix',
  13. company: 'Company',
  14. state: 'State',
  15. stateEmptyText: 'Choose a state...',
  16. email: 'E-mail',
  17. birth: 'Date of Birth',
  18. save: 'Save',
  19. cancel: 'Cancel',
  20. initComponent : function(config) {
  21. Ext.apply(this, {
  22. url: 'save-form.php',
  23. frame: true,
  24. title: this.formTitle,
  25. bodyStyle: 'padding:5px 5px 0',
  26. width: 370,
  27. defaultType: 'textfield',
  28. defaults: {
  29. width: 330
  30. },
  31. items: [{
  32. fieldLabel: this.firstName,
  33. name: 'firstname',
  34. allowBlank:false
  35. },{
  36. fieldLabel: this.lastName,
  37. name: 'lastName'
  38. },{
  39. fieldLabel: this.surnamePrefix,
  40. width: 150,
  41. name: 'surnamePrefix'
  42. },{
  43. fieldLabel: this.company,
  44. name: 'company'
  45. }, Ext.create('Ext.form.field.ComboBox', {
  46. fieldLabel: this.province,
  47. hiddenName: 'state',
  48. store: Ext.create('Ext.data.ArrayStore', {
  49. fields: ['provincie'],
  50. data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
  51. }),
  52. displayField: 'provincie',
  53. typeAhead: true,
  54. queryMode: 'local',
  55. triggerAction: 'all',
  56. emptyText: this.stateEmptyText,
  57. selectOnFocus:true
  58. }), {
  59. fieldLabel: this.email,
  60. name: 'email',
  61. vtype:'email'
  62. }, Ext.create('Ext.form.field.Date', {
  63. fieldLabel: this.birth,
  64. name: 'birth'
  65. })
  66. ],
  67. buttons: [{
  68. text: this.save
  69. },{
  70. text: this.cancel
  71. }]
  72. });
  73. this.callParent(arguments);
  74. }
  75. });
  76. Ext.require([
  77. 'Ext.tip.QuickTipManager'
  78. ]);
  79. Ext.onReady(function(){
  80. Ext.tip.QuickTipManager.init();
  81. // turn on validation errors beside the field globally
  82. Ext.form.field.Base.prototype.msgTarget = 'side';
  83. var bd = Ext.getBody();
  84. bd.createChild({tag: 'h2', html: 'Localized Contact Form'});
  85. // simple form
  86. var simple = Ext.create('Ext.app.ContactForm', {});
  87. simple.render(document.body);
  88. });