examples/form/contact-form.js

   1 Ext.require([
   2     'Ext.form.*'
   3 ]);
   4
   5 Ext.onReady(function() {
   6
   7     var win;
   8
   9     function showContactForm() {
  10         if (!win) {
  11             var form = Ext.widget('form', {
  12                 layout: {
  13                     type: 'vbox',
  14                     align: 'stretch'
  15                 },
  16                 border: false,
  17                 bodyPadding: 10,
  18
  19                 fieldDefaults: {
  20                     labelAlign: 'top',
  21                     labelWidth: 100,
  22                     labelStyle: 'font-weight:bold'
  23                 },
  24                 defaults: {
  25                     margins: '0 0 10 0'
  26                 },
  27
  28                 items: [{
  29                     xtype: 'fieldcontainer',
  30                     fieldLabel: 'Your Name',
  31                     labelStyle: 'font-weight:bold;padding:0',
  32                     layout: 'hbox',
  33                     defaultType: 'textfield',
  34
  35                     fieldDefaults: {
  36                         labelAlign: 'top'
  37                     },
  38
  39                     items: [{
  40                         flex: 1,
  41                         name: 'firstName',
  42                         fieldLabel: 'First',
  43                         allowBlank: false
  44                     }, {
  45                         width: 30,
  46                         name: 'middleInitial',
  47                         fieldLabel: 'MI',
  48                         margins: '0 0 0 5'
  49                     }, {
  50                         flex: 2,
  51                         name: 'lastName',
  52                         fieldLabel: 'Last',
  53                         allowBlank: false,
  54                         margins: '0 0 0 5'
  55                     }]
  56                 }, {
  57                     xtype: 'textfield',
  58                     fieldLabel: 'Your Email Address',
  59                     vtype: 'email',
  60                     allowBlank: false
  61                 }, {
  62                     xtype: 'textfield',
  63                     fieldLabel: 'Subject',
  64                     allowBlank: false
  65                 }, {
  66                     xtype: 'textareafield',
  67                     fieldLabel: 'Message',
  68                     labelAlign: 'top',
  69                     flex: 1,
  70                     margins: '0',
  71                     allowBlank: false
  72                 }],
  73
  74                 buttons: [{
  75                     text: 'Cancel',
  76                     handler: function() {
  77                         this.up('form').getForm().reset();
  78                         this.up('window').hide();
  79                     }
  80                 }, {
  81                     text: 'Send',
  82                     handler: function() {
  83                         if (this.up('form').getForm().isValid()) {
  84                             // In a real application, this would submit the form to the configured url
  85                             // this.up('form').getForm().submit();
  86                             this.up('form').getForm().reset();
  87                             this.up('window').hide();
  88                             Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
  89                         }
  90                     }
  91                 }]
  92             });
  93
  94             win = Ext.widget('window', {
  95                 title: 'Contact Us',
  96                 closeAction: 'hide',
  97                 width: 400,
  98                 height: 400,
  99                 minHeight: 400,
 100                 layout: 'fit',
 101                 resizable: true,
 102                 modal: true,
 103                 items: form
 104             });
 105         }
 106         win.show();
 107     }
 108
 109     var mainPanel = Ext.widget('panel', {
 110         renderTo: Ext.getBody(),
 111         title: 'Welcome!',
 112         width: 500,
 113         bodyPadding: 20,
 114
 115         items: [{
 116             xtype: 'component',
 117             html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
 118                   'send us a message. We will respond to your inquiry as quickly as possible.',
 119             style: 'margin-bottom: 20px;'
 120         }, {
 121             xtype: 'container',
 122             style: 'text-align:center',
 123             items: [{
 124                 xtype: 'button',
 125                 cls: 'contactBtn',
 126                 scale: 'large',
 127                 text: 'Contact Us',
 128                 handler: showContactForm
 129             }]
 130         }]
 131     });
 132
 133 });