examples/form/contact-form.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.form.*'
  17 ]);
  18
  19 Ext.onReady(function() {
  20
  21     var win;
  22
  23     function showContactForm() {
  24         if (!win) {
  25             var form = Ext.widget('form', {
  26                 layout: {
  27                     type: 'vbox',
  28                     align: 'stretch'
  29                 },
  30                 border: false,
  31                 bodyPadding: 10,
  32
  33                 fieldDefaults: {
  34                     labelAlign: 'top',
  35                     labelWidth: 100,
  36                     labelStyle: 'font-weight:bold'
  37                 },
  38                 defaults: {
  39                     margins: '0 0 10 0'
  40                 },
  41
  42                 items: [{
  43                     xtype: 'fieldcontainer',
  44                     fieldLabel: 'Your Name',
  45                     labelStyle: 'font-weight:bold;padding:0',
  46                     layout: 'hbox',
  47                     defaultType: 'textfield',
  48
  49                     fieldDefaults: {
  50                         labelAlign: 'top'
  51                     },
  52
  53                     items: [{
  54                         flex: 1,
  55                         name: 'firstName',
  56                         fieldLabel: 'First',
  57                         allowBlank: false
  58                     }, {
  59                         width: 30,
  60                         name: 'middleInitial',
  61                         fieldLabel: 'MI',
  62                         margins: '0 0 0 5'
  63                     }, {
  64                         flex: 2,
  65                         name: 'lastName',
  66                         fieldLabel: 'Last',
  67                         allowBlank: false,
  68                         margins: '0 0 0 5'
  69                     }]
  70                 }, {
  71                     xtype: 'textfield',
  72                     fieldLabel: 'Your Email Address',
  73                     vtype: 'email',
  74                     allowBlank: false
  75                 }, {
  76                     xtype: 'textfield',
  77                     fieldLabel: 'Subject',
  78                     allowBlank: false
  79                 }, {
  80                     xtype: 'textareafield',
  81                     fieldLabel: 'Message',
  82                     labelAlign: 'top',
  83                     flex: 1,
  84                     margins: '0',
  85                     allowBlank: false
  86                 }],
  87
  88                 buttons: [{
  89                     text: 'Cancel',
  90                     handler: function() {
  91                         this.up('form').getForm().reset();
  92                         this.up('window').hide();
  93                     }
  94                 }, {
  95                     text: 'Send',
  96                     handler: function() {
  97                         if (this.up('form').getForm().isValid()) {
  98                             // In a real application, this would submit the form to the configured url
  99                             // this.up('form').getForm().submit();
 100                             this.up('form').getForm().reset();
 101                             this.up('window').hide();
 102                             Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
 103                         }
 104                     }
 105                 }]
 106             });
 107
 108             win = Ext.widget('window', {
 109                 title: 'Contact Us',
 110                 closeAction: 'hide',
 111                 width: 400,
 112                 height: 400,
 113                 minHeight: 400,
 114                 layout: 'fit',
 115                 resizable: true,
 116                 modal: true,
 117                 items: form
 118             });
 119         }
 120         win.show();
 121     }
 122
 123     var mainPanel = Ext.widget('panel', {
 124         renderTo: Ext.getBody(),
 125         title: 'Welcome!',
 126         width: 500,
 127         bodyPadding: 20,
 128
 129         items: [{
 130             xtype: 'component',
 131             html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
 132                   'send us a message. We will respond to your inquiry as quickly as possible.',
 133             style: 'margin-bottom: 20px;'
 134         }, {
 135             xtype: 'container',
 136             style: 'text-align:center',
 137             items: [{
 138                 xtype: 'button',
 139                 cls: 'contactBtn',
 140                 scale: 'large',
 141                 text: 'Contact Us',
 142                 handler: showContactForm
 143             }]
 144         }]
 145     });
 146
 147 });