examples/locale/ContactForm.js

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