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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| Ext.require([
| 'Ext.form.*',
| 'Ext.tip.QuickTipManager'
| ]);
|
| Ext.onReady(function() {
|
| // Add the additional 'advanced' VTypes
| Ext.apply(Ext.form.field.VTypes, {
| daterange: function(val, field) {
| var date = field.parseDate(val);
|
| if (!date) {
| return false;
| }
| if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
| var start = field.up('form').down('#' + field.startDateField);
| start.setMaxValue(date);
| start.validate();
| this.dateRangeMax = date;
| }
| else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
| var end = field.up('form').down('#' + field.endDateField);
| end.setMinValue(date);
| end.validate();
| this.dateRangeMin = date;
| }
| /*
| * Always return true since we're only using this vtype to set the
| * min/max allowed values (these are tested for after the vtype test)
| */
| return true;
| },
|
| daterangeText: 'Start date must be less than end date',
|
| password: function(val, field) {
| if (field.initialPassField) {
| var pwd = field.up('form').down('#' + field.initialPassField);
| return (val == pwd.getValue());
| }
| return true;
| },
|
| passwordText: 'Passwords do not match'
| });
|
| Ext.tip.QuickTipManager.init();
|
| /*
| * ================ Date Range =======================
| */
|
| var dr = Ext.create('Ext.form.Panel', {
| renderTo: 'dr',
| frame: true,
| title: 'Date Range',
| bodyPadding: '5 5 0',
| width: 350,
| fieldDefaults: {
| labelWidth: 125,
| msgTarget: 'side',
| autoFitErrors: false
| },
| defaults: {
| width: 300
| },
| defaultType: 'datefield',
| items: [{
| fieldLabel: 'Start Date',
| name: 'startdt',
| itemId: 'startdt',
| vtype: 'daterange',
| endDateField: 'enddt' // id of the end date field
| }, {
| fieldLabel: 'End Date',
| name: 'enddt',
| itemId: 'enddt',
| vtype: 'daterange',
| startDateField: 'startdt' // id of the start date field
| }]
| });
|
|
| /*
| * ================ Password Verification =======================
| */
|
| var pwd = Ext.create('Ext.form.Panel', {
| renderTo: 'pw',
| frame: true,
| title: 'Password Verification',
| bodyPadding: '5 5 0',
| width: 350,
| fieldDefaults: {
| labelWidth: 125,
| msgTarget: 'side',
| autoFitErrors: false
| },
| defaults: {
| width: 300,
| inputType: 'password'
| },
| defaultType: 'textfield',
| items: [{
| fieldLabel: 'Password',
| name: 'pass',
| itemId: 'pass',
| allowBlank: false,
| listeners: {
| validitychange: function(field){
| field.next().validate();
| },
| blur: function(field){
| field.next().validate();
| }
| }
| }, {
| fieldLabel: 'Confirm Password',
| name: 'pass-cfrm',
| vtype: 'password',
| initialPassField: 'pass' // id of the initial password field
| }]
| });
|
| });
|
|
