source: trunk/web/addons/job_monarch/lib/extjs/air/samples/tasks/js/DateTimeField.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 8.3 KB
Line 
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
9Ext.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  */
25Ext.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
384Ext.reg('xdatetime', Ext.ux.form.DateTime);
Note: See TracBrowser for help on using the repository browser.