ContactForm.js
2.82 KB
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);
});