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