examples/locale/ContactForm.js

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