1 | /* |
---|
2 | * Ext JS Library 0.30 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.namespace('Ext.ux.form'); |
---|
10 | |
---|
11 | /** |
---|
12 | * Ext.ux.form.DateTime Extension Class for Ext 2.x Library |
---|
13 | * |
---|
14 | * @author Ing. Jozef Sakalos |
---|
15 | * @copyright (c) 2008, Ing. Jozef Sakalos |
---|
16 | * @version $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $ |
---|
17 | * |
---|
18 | * @class Ext.ux.form.DateTime |
---|
19 | * @extends Ext.form.Field |
---|
20 | * |
---|
21 | * @history |
---|
22 | * 2008-1-31 Jack Slocum |
---|
23 | * Updated for reformatting and code edits |
---|
24 | */ |
---|
25 | Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, { |
---|
26 | defaultAutoCreate: { |
---|
27 | tag: 'input', |
---|
28 | type: 'hidden' |
---|
29 | }, |
---|
30 | dateWidth: 135, |
---|
31 | timeWidth: 100, |
---|
32 | dtSeparator: ' ', |
---|
33 | hiddenFormat: 'Y-m-d H:i:s', |
---|
34 | otherToNow: true, |
---|
35 | timePosition: 'right', |
---|
36 | |
---|
37 | initComponent: function(){ |
---|
38 | // call parent initComponent |
---|
39 | Ext.ux.form.DateTime.superclass.initComponent.call(this); |
---|
40 | |
---|
41 | // create DateField |
---|
42 | var dateConfig = Ext.apply({}, { |
---|
43 | id: this.id + '-date', |
---|
44 | format: this.dateFormat, |
---|
45 | width: this.dateWidth, |
---|
46 | listeners: { |
---|
47 | blur: { |
---|
48 | scope: this, |
---|
49 | fn: this.onBlur |
---|
50 | }, |
---|
51 | focus: { |
---|
52 | scope: this, |
---|
53 | fn: this.onFocus |
---|
54 | } |
---|
55 | } |
---|
56 | }, this.dateConfig); |
---|
57 | this.df = new Ext.form.DateField(dateConfig); |
---|
58 | delete (this.dateFormat); |
---|
59 | |
---|
60 | // create TimeField |
---|
61 | var timeConfig = Ext.apply({}, { |
---|
62 | id: this.id + '-time', |
---|
63 | format: this.timeFormat, |
---|
64 | width: this.timeWidth, |
---|
65 | listeners: { |
---|
66 | blur: { |
---|
67 | scope: this, |
---|
68 | fn: this.onBlur |
---|
69 | }, |
---|
70 | focus: { |
---|
71 | scope: this, |
---|
72 | fn: this.onFocus |
---|
73 | } |
---|
74 | } |
---|
75 | }, this.timeConfig); |
---|
76 | this.tf = new Ext.form.TimeField(timeConfig); |
---|
77 | delete (this.timeFormat); |
---|
78 | |
---|
79 | // relay events |
---|
80 | this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']); |
---|
81 | this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']); |
---|
82 | |
---|
83 | }, |
---|
84 | onRender: function(ct, position){ |
---|
85 | if (this.isRendered) { |
---|
86 | return; |
---|
87 | } |
---|
88 | |
---|
89 | // render underlying field |
---|
90 | Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position); |
---|
91 | |
---|
92 | // render DateField and TimeField |
---|
93 | // create bounding table |
---|
94 | if ('below' === this.timePosition) { |
---|
95 | var t = Ext.DomHelper.append(ct, { |
---|
96 | tag: 'table', |
---|
97 | style: 'border-collapse:collapse', |
---|
98 | children: [{ |
---|
99 | tag: 'tr', |
---|
100 | children: [{ |
---|
101 | tag: 'td', |
---|
102 | style: 'padding-bottom:1px', |
---|
103 | cls: 'ux-datetime-date' |
---|
104 | }] |
---|
105 | }, { |
---|
106 | tag: 'tr', |
---|
107 | children: [{ |
---|
108 | tag: 'td', |
---|
109 | cls: 'ux-datetime-time' |
---|
110 | }] |
---|
111 | }] |
---|
112 | }, true); |
---|
113 | } |
---|
114 | else { |
---|
115 | var t = Ext.DomHelper.append(ct, { |
---|
116 | tag: 'table', |
---|
117 | style: 'border-collapse:collapse', |
---|
118 | children: [{ |
---|
119 | tag: 'tr', |
---|
120 | children: [{ |
---|
121 | tag: 'td', |
---|
122 | style: 'padding-right:4px', |
---|
123 | cls: 'ux-datetime-date' |
---|
124 | }, { |
---|
125 | tag: 'td', |
---|
126 | cls: 'ux-datetime-time' |
---|
127 | }] |
---|
128 | }] |
---|
129 | }, true); |
---|
130 | } |
---|
131 | |
---|
132 | this.tableEl = t; |
---|
133 | this.wrap = t.wrap({ |
---|
134 | cls: 'x-form-field-wrap' |
---|
135 | }); |
---|
136 | this.wrap.on("mousedown", this.onMouseDown, this, { |
---|
137 | delay: 10 |
---|
138 | }); |
---|
139 | |
---|
140 | // render DateField & TimeField |
---|
141 | this.df.render(t.child('td.ux-datetime-date')); |
---|
142 | this.tf.render(t.child('td.ux-datetime-time')); |
---|
143 | |
---|
144 | if (Ext.isIE && Ext.isStrict) { |
---|
145 | t.select('input').applyStyles({ |
---|
146 | top: 0 |
---|
147 | }); |
---|
148 | } |
---|
149 | |
---|
150 | this.on('specialkey', this.onSpecialKey, this); |
---|
151 | |
---|
152 | this.df.el.swallowEvent(['keydown', 'keypress']); |
---|
153 | this.tf.el.swallowEvent(['keydown', 'keypress']); |
---|
154 | |
---|
155 | // create errorIcon for side invalid |
---|
156 | if ('side' === this.msgTarget) { |
---|
157 | var elp = this.el.findParent('.x-form-element', 10, true); |
---|
158 | this.errorIcon = elp.createChild({ |
---|
159 | cls: 'x-form-invalid-icon' |
---|
160 | }); |
---|
161 | |
---|
162 | this.df.errorIcon = this.errorIcon; |
---|
163 | this.tf.errorIcon = this.errorIcon; |
---|
164 | } |
---|
165 | |
---|
166 | this.isRendered = true; |
---|
167 | |
---|
168 | }, |
---|
169 | getPositionEl: function(){ |
---|
170 | return this.wrap; |
---|
171 | }, |
---|
172 | getResizeEl: function(){ |
---|
173 | return this.wrap; |
---|
174 | }, |
---|
175 | |
---|
176 | adjustSize: Ext.BoxComponent.prototype.adjustSize, |
---|
177 | |
---|
178 | alignErrorIcon: function(){ |
---|
179 | this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); |
---|
180 | }, |
---|
181 | |
---|
182 | onSpecialKey: function(t, e){ |
---|
183 | if (e.getKey() == e.TAB) { |
---|
184 | if (t === this.df && !e.shiftKey) { |
---|
185 | e.stopEvent(); |
---|
186 | this.tf.focus(); |
---|
187 | } |
---|
188 | if (t === this.tf && e.shiftKey) { |
---|
189 | e.stopEvent(); |
---|
190 | this.df.focus(); |
---|
191 | } |
---|
192 | } |
---|
193 | }, |
---|
194 | |
---|
195 | setSize: function(w, h){ |
---|
196 | if (!w) { |
---|
197 | return; |
---|
198 | } |
---|
199 | if ('below' == this.timePosition) { |
---|
200 | this.df.setSize(w, h); |
---|
201 | this.tf.setSize(w, h) |
---|
202 | if (Ext.isIE) { |
---|
203 | this.df.el.up('td').setWidth(w); |
---|
204 | this.tf.el.up('td').setWidth(w); |
---|
205 | } |
---|
206 | } |
---|
207 | else { |
---|
208 | this.df.setSize(w - this.timeWidth - 4, h); |
---|
209 | this.tf.setSize(this.timeWidth, h); |
---|
210 | |
---|
211 | if (Ext.isIE) { |
---|
212 | this.df.el.up('td').setWidth(w - this.timeWidth - 4); |
---|
213 | this.tf.el.up('td').setWidth(this.timeWidth); |
---|
214 | } |
---|
215 | } |
---|
216 | |
---|
217 | }, |
---|
218 | |
---|
219 | setValue: function(val){ |
---|
220 | if (!val) { |
---|
221 | this.setDate(''); |
---|
222 | this.setTime(''); |
---|
223 | this.updateValue(); |
---|
224 | return; |
---|
225 | } |
---|
226 | // clear cross frame AIR nonsense |
---|
227 | val = new Date(val.getTime()); |
---|
228 | var da, time; |
---|
229 | if (Ext.isDate(val)) { |
---|
230 | this.setDate(val); |
---|
231 | this.setTime(val); |
---|
232 | this.dateValue = new Date(val); |
---|
233 | } |
---|
234 | else { |
---|
235 | da = val.split(this.dtSeparator); |
---|
236 | this.setDate(da[0]); |
---|
237 | if (da[1]) { |
---|
238 | this.setTime(da[1]); |
---|
239 | } |
---|
240 | } |
---|
241 | this.updateValue(); |
---|
242 | }, |
---|
243 | |
---|
244 | getValue: function(){ |
---|
245 | // create new instance of date |
---|
246 | return this.dateValue ? new Date(this.dateValue) : ''; |
---|
247 | }, |
---|
248 | |
---|
249 | onMouseDown: function(e){ |
---|
250 | // just to prevent blur event when clicked in the middle of fields |
---|
251 | this.wrapClick = 'td' === e.target.nodeName.toLowerCase(); |
---|
252 | }, |
---|
253 | |
---|
254 | onFocus: function(){ |
---|
255 | if (!this.hasFocus) { |
---|
256 | this.hasFocus = true; |
---|
257 | this.startValue = this.getValue(); |
---|
258 | this.fireEvent("focus", this); |
---|
259 | } |
---|
260 | }, |
---|
261 | |
---|
262 | onBlur: function(f){ |
---|
263 | // called by both DateField and TimeField blur events |
---|
264 | |
---|
265 | // revert focus to previous field if clicked in between |
---|
266 | if (this.wrapClick) { |
---|
267 | f.focus(); |
---|
268 | this.wrapClick = false; |
---|
269 | } |
---|
270 | |
---|
271 | // update underlying value |
---|
272 | if (f === this.df) { |
---|
273 | this.updateDate(); |
---|
274 | } |
---|
275 | else { |
---|
276 | this.updateTime(); |
---|
277 | } |
---|
278 | this.updateHidden(); |
---|
279 | |
---|
280 | // fire events later |
---|
281 | (function(){ |
---|
282 | if (!this.df.hasFocus && !this.tf.hasFocus) { |
---|
283 | var v = this.getValue(); |
---|
284 | if (String(v) !== String(this.startValue)) { |
---|
285 | this.fireEvent("change", this, v, this.startValue); |
---|
286 | } |
---|
287 | this.hasFocus = false; |
---|
288 | this.fireEvent('blur', this); |
---|
289 | } |
---|
290 | }).defer(100, this); |
---|
291 | |
---|
292 | }, |
---|
293 | updateDate: function(){ |
---|
294 | |
---|
295 | var d = this.df.getValue(); |
---|
296 | if (d) { |
---|
297 | if (!Ext.isDate(this.dateValue)) { |
---|
298 | this.initDateValue(); |
---|
299 | if (!this.tf.getValue()) { |
---|
300 | this.setTime(this.dateValue); |
---|
301 | } |
---|
302 | } |
---|
303 | this.dateValue.setFullYear(d.getFullYear()); |
---|
304 | this.dateValue.setMonth(d.getMonth()); |
---|
305 | this.dateValue.setDate(d.getDate()); |
---|
306 | } |
---|
307 | else { |
---|
308 | this.dateValue = ''; |
---|
309 | this.setTime(''); |
---|
310 | } |
---|
311 | }, |
---|
312 | updateTime: function(){ |
---|
313 | var t = this.tf.getValue(); |
---|
314 | if (t && !Ext.isDate(t)) { |
---|
315 | t = Date.parseDate(t, this.tf.format); |
---|
316 | } |
---|
317 | if (t && !this.df.getValue()) { |
---|
318 | this.initDateValue(); |
---|
319 | this.setDate(this.dateValue); |
---|
320 | } |
---|
321 | if (Ext.isDate(this.dateValue)) { |
---|
322 | if (t) { |
---|
323 | this.dateValue.setHours(t.getHours()); |
---|
324 | this.dateValue.setMinutes(t.getMinutes()); |
---|
325 | this.dateValue.setSeconds(t.getSeconds()); |
---|
326 | } |
---|
327 | else { |
---|
328 | this.dateValue.setHours(0); |
---|
329 | this.dateValue.setMinutes(0); |
---|
330 | this.dateValue.setSeconds(0); |
---|
331 | } |
---|
332 | } |
---|
333 | }, |
---|
334 | initDateValue: function(){ |
---|
335 | this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0); |
---|
336 | }, |
---|
337 | updateHidden: function(){ |
---|
338 | if (this.isRendered) { |
---|
339 | var value = Ext.isDate(this.dateValue) ? this.dateValue.format(this.hiddenFormat) : ''; |
---|
340 | this.el.dom.value = value; |
---|
341 | } |
---|
342 | }, |
---|
343 | updateValue: function(){ |
---|
344 | |
---|
345 | this.updateDate(); |
---|
346 | this.updateTime(); |
---|
347 | this.updateHidden(); |
---|
348 | |
---|
349 | return; |
---|
350 | |
---|
351 | }, |
---|
352 | setDate: function(date){ |
---|
353 | this.df.setValue(date); |
---|
354 | }, |
---|
355 | setTime: function(date){ |
---|
356 | this.tf.setValue(date); |
---|
357 | }, |
---|
358 | isValid: function(){ |
---|
359 | return this.df.isValid() && this.tf.isValid(); |
---|
360 | }, |
---|
361 | validate: function(){ |
---|
362 | return this.df.validate() && this.tf.validate(); |
---|
363 | }, |
---|
364 | focus: function(){ |
---|
365 | this.df.focus(); |
---|
366 | }, |
---|
367 | |
---|
368 | onDisable : function(){ |
---|
369 | if(this.rendered){ |
---|
370 | this.df.disable(); |
---|
371 | this.tf.disable(); |
---|
372 | } |
---|
373 | }, |
---|
374 | |
---|
375 | onEnable : function(){ |
---|
376 | if(this.rendered){ |
---|
377 | this.df.enable(); |
---|
378 | this.tf.enable(); |
---|
379 | } |
---|
380 | } |
---|
381 | }); |
---|
382 | |
---|
383 | // register xtype |
---|
384 | Ext.reg('xdatetime', Ext.ux.form.DateTime); |
---|