docs/source/ContactForm.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.ns('Ext.app');\r
   9 \r
  10 Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {\r
  11     formTitle: 'Contact Information (English)',\r
  12     firstName: 'First Name',\r
  13     lastName: 'Surname',\r
  14     surnamePrefix: 'Surname Prefix',\r
  15     company: 'Company',\r
  16     state: 'State',\r
  17     stateEmptyText: 'Choose a state...',\r
  18     email: 'E-mail',\r
  19     birth: 'Date of Birth',\r
  20     save: 'Save',\r
  21     cancel: 'Cancel',\r
  22     \r
  23     initComponent : function(config) {\r
  24         Ext.apply(this, {\r
  25             labelWidth: 100, // label settings here cascade unless overridden\r
  26             url:'save-form.php',\r
  27             frame:true,\r
  28             title: this.formTitle,\r
  29             bodyStyle:'padding:5px 5px 0',\r
  30             width: 370,\r
  31             defaults: {width: 220},\r
  32             defaultType: 'textfield',\r
  33     \r
  34             items: [{\r
  35                     fieldLabel: this.firstName,\r
  36                     name: 'firstname',\r
  37                     allowBlank:false\r
  38                 },{\r
  39                     fieldLabel: this.lastName,\r
  40                     name: 'lastName'\r
  41                 },{\r
  42                     fieldLabel: this.surnamePrefix,\r
  43                     width: 50,\r
  44                     name: 'surnamePrefix'\r
  45                 },{\r
  46                     fieldLabel: this.company,\r
  47                     name: 'company'\r
  48                 },  new Ext.form.ComboBox({\r
  49                     fieldLabel: this.province,\r
  50                     hiddenName: 'state',\r
  51                     store: new Ext.data.ArrayStore({\r
  52                         fields: ['provincie'],\r
  53                         data : Ext.exampledata.dutch_provinces // from dutch-provinces.js\r
  54                     }),\r
  55                     displayField: 'provincie',\r
  56                     typeAhead: true,\r
  57                     mode: 'local',\r
  58                     triggerAction: 'all',\r
  59                     emptyText: this.stateEmtyText,\r
  60                     selectOnFocus:true,\r
  61                     width:190\r
  62                 }), {\r
  63                     fieldLabel: this.email,\r
  64                     name: 'email',\r
  65                     vtype:'email'\r
  66                 }, new Ext.form.DateField({\r
  67                     fieldLabel: this.birth,\r
  68                     name: 'birth'\r
  69                 })\r
  70             ],\r
  71     \r
  72             buttons: [{\r
  73                 text: this.save\r
  74             },{\r
  75                 text: this.cancel\r
  76             }]\r
  77         });\r
  78         \r
  79         Ext.app.ContactForm.superclass.initComponent.apply(this, arguments);\r
  80     }\r
  81 });\r
  82 \r
  83 Ext.onReady(function(){\r
  84     Ext.QuickTips.init();\r
  85 \r
  86     // turn on validation errors beside the field globally\r
  87     Ext.form.Field.prototype.msgTarget = 'side';\r
  88     \r
  89     var bd = Ext.getBody();\r
  90     \r
  91     bd.createChild({tag: 'h2', html: 'Localized Contact Form'});\r
  92         \r
  93     // simple form\r
  94     var simple = new Ext.app.ContactForm();\r
  95     simple.render(document.body);\r
  96 });</pre>    \r
  97 </body>\r
  98 </html>