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