examples/locale/ContactForm.js

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