--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.namespace('Ext.ux.form');\r
+\r
+<div id="cls-Ext.ux.form.DateTime"></div>/**\r
+ * Ext.ux.form.DateTime Extension Class for Ext 2.x Library\r
+ *\r
+ * @author Ing. Jozef Sakalos\r
+ * @copyright (c) 2008, Ing. Jozef Sakalos\r
+ * @version $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $\r
+ *\r
+ * @class Ext.ux.form.DateTime\r
+ * @extends Ext.form.Field\r
+ * \r
+ * @history\r
+ * 2008-1-31 Jack Slocum\r
+ * Updated for reformatting and code edits\r
+ */\r
+Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {\r
+ defaultAutoCreate: {\r
+ tag: 'input',\r
+ type: 'hidden'\r
+ },\r
+ dateWidth: 135,\r
+ timeWidth: 100,\r
+ dtSeparator: ' ',\r
+ hiddenFormat: 'Y-m-d H:i:s',\r
+ otherToNow: true,\r
+ timePosition: 'right',\r
+ \r
+ initComponent: function(){\r
+ // call parent initComponent\r
+ Ext.ux.form.DateTime.superclass.initComponent.call(this);\r
+ \r
+ // create DateField\r
+ var dateConfig = Ext.apply({}, {\r
+ id: this.id + '-date',\r
+ format: this.dateFormat,\r
+ width: this.dateWidth,\r
+ listeners: {\r
+ blur: {\r
+ scope: this,\r
+ fn: this.onBlur\r
+ },\r
+ focus: {\r
+ scope: this,\r
+ fn: this.onFocus\r
+ }\r
+ }\r
+ }, this.dateConfig);\r
+ this.df = new Ext.form.DateField(dateConfig);\r
+ delete (this.dateFormat);\r
+ \r
+ // create TimeField\r
+ var timeConfig = Ext.apply({}, {\r
+ id: this.id + '-time',\r
+ format: this.timeFormat,\r
+ width: this.timeWidth,\r
+ listeners: {\r
+ blur: {\r
+ scope: this,\r
+ fn: this.onBlur\r
+ },\r
+ focus: {\r
+ scope: this,\r
+ fn: this.onFocus\r
+ }\r
+ }\r
+ }, this.timeConfig);\r
+ this.tf = new Ext.form.TimeField(timeConfig);\r
+ delete (this.timeFormat);\r
+ \r
+ // relay events\r
+ this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);\r
+ this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);\r
+ \r
+ },\r
+ onRender: function(ct, position){\r
+ if (this.isRendered) {\r
+ return;\r
+ }\r
+ \r
+ // render underlying field\r
+ Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);\r
+ \r
+ // render DateField and TimeField\r
+ // create bounding table\r
+ if ('below' === this.timePosition) {\r
+ var t = Ext.DomHelper.append(ct, {\r
+ tag: 'table',\r
+ style: 'border-collapse:collapse',\r
+ children: [{\r
+ tag: 'tr',\r
+ children: [{\r
+ tag: 'td',\r
+ style: 'padding-bottom:1px',\r
+ cls: 'ux-datetime-date'\r
+ }]\r
+ }, {\r
+ tag: 'tr',\r
+ children: [{\r
+ tag: 'td',\r
+ cls: 'ux-datetime-time'\r
+ }]\r
+ }]\r
+ }, true);\r
+ }\r
+ else {\r
+ var t = Ext.DomHelper.append(ct, {\r
+ tag: 'table',\r
+ style: 'border-collapse:collapse',\r
+ children: [{\r
+ tag: 'tr',\r
+ children: [{\r
+ tag: 'td',\r
+ style: 'padding-right:4px',\r
+ cls: 'ux-datetime-date'\r
+ }, {\r
+ tag: 'td',\r
+ cls: 'ux-datetime-time'\r
+ }]\r
+ }]\r
+ }, true);\r
+ }\r
+ \r
+ this.tableEl = t;\r
+ this.wrap = t.wrap({\r
+ cls: 'x-form-field-wrap'\r
+ });\r
+ this.wrap.on("mousedown", this.onMouseDown, this, {\r
+ delay: 10\r
+ });\r
+ \r
+ // render DateField & TimeField\r
+ this.df.render(t.child('td.ux-datetime-date'));\r
+ this.tf.render(t.child('td.ux-datetime-time'));\r
+ \r
+ if (Ext.isIE && Ext.isStrict) {\r
+ t.select('input').applyStyles({\r
+ top: 0\r
+ });\r
+ }\r
+ \r
+ this.on('specialkey', this.onSpecialKey, this);\r
+ \r
+ this.df.el.swallowEvent(['keydown', 'keypress']);\r
+ this.tf.el.swallowEvent(['keydown', 'keypress']);\r
+ \r
+ // create errorIcon for side invalid\r
+ if ('side' === this.msgTarget) {\r
+ var elp = this.el.findParent('.x-form-element', 10, true);\r
+ this.errorIcon = elp.createChild({\r
+ cls: 'x-form-invalid-icon'\r
+ });\r
+ \r
+ this.df.errorIcon = this.errorIcon;\r
+ this.tf.errorIcon = this.errorIcon;\r
+ }\r
+ \r
+ this.isRendered = true;\r
+ \r
+ },\r
+ getPositionEl: function(){\r
+ return this.wrap;\r
+ },\r
+ getResizeEl: function(){\r
+ return this.wrap;\r
+ },\r
+ \r
+ adjustSize: Ext.BoxComponent.prototype.adjustSize,\r
+ \r
+ alignErrorIcon: function(){\r
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);\r
+ },\r
+ \r
+ onSpecialKey: function(t, e){\r
+ if (e.getKey() == e.TAB) {\r
+ if (t === this.df && !e.shiftKey) {\r
+ e.stopEvent();\r
+ this.tf.focus();\r
+ }\r
+ if (t === this.tf && e.shiftKey) {\r
+ e.stopEvent();\r
+ this.df.focus();\r
+ }\r
+ }\r
+ },\r
+ \r
+ setSize: function(w, h){\r
+ if (!w) {\r
+ return;\r
+ }\r
+ if ('below' == this.timePosition) {\r
+ this.df.setSize(w, h);\r
+ this.tf.setSize(w, h)\r
+ if (Ext.isIE) {\r
+ this.df.el.up('td').setWidth(w);\r
+ this.tf.el.up('td').setWidth(w);\r
+ }\r
+ }\r
+ else {\r
+ this.df.setSize(w - this.timeWidth - 4, h);\r
+ this.tf.setSize(this.timeWidth, h);\r
+ \r
+ if (Ext.isIE) {\r
+ this.df.el.up('td').setWidth(w - this.timeWidth - 4);\r
+ this.tf.el.up('td').setWidth(this.timeWidth);\r
+ }\r
+ }\r
+ \r
+ },\r
+ \r
+ setValue: function(val){\r
+ if (!val) {\r
+ this.setDate('');\r
+ this.setTime('');\r
+ this.updateValue();\r
+ return;\r
+ }\r
+ // clear cross frame AIR nonsense\r
+ val = new Date(val.getTime());\r
+ var da, time;\r
+ if (Ext.isDate(val)) {\r
+ this.setDate(val);\r
+ this.setTime(val);\r
+ this.dateValue = new Date(val);\r
+ }\r
+ else {\r
+ da = val.split(this.dtSeparator);\r
+ this.setDate(da[0]);\r
+ if (da[1]) {\r
+ this.setTime(da[1]);\r
+ }\r
+ }\r
+ this.updateValue();\r
+ },\r
+ \r
+ getValue: function(){\r
+ // create new instance of date\r
+ return this.dateValue ? new Date(this.dateValue) : '';\r
+ },\r
+ \r
+ onMouseDown: function(e){\r
+ // just to prevent blur event when clicked in the middle of fields\r
+ this.wrapClick = 'td' === e.target.nodeName.toLowerCase();\r
+ },\r
+ \r
+ onFocus: function(){\r
+ if (!this.hasFocus) {\r
+ this.hasFocus = true;\r
+ this.startValue = this.getValue();\r
+ this.fireEvent("focus", this);\r
+ }\r
+ },\r
+ \r
+ onBlur: function(f){\r
+ // called by both DateField and TimeField blur events\r
+ \r
+ // revert focus to previous field if clicked in between\r
+ if (this.wrapClick) {\r
+ f.focus();\r
+ this.wrapClick = false;\r
+ }\r
+ \r
+ // update underlying value\r
+ if (f === this.df) {\r
+ this.updateDate();\r
+ }\r
+ else {\r
+ this.updateTime();\r
+ }\r
+ this.updateHidden();\r
+ \r
+ // fire events later\r
+ (function(){\r
+ if (!this.df.hasFocus && !this.tf.hasFocus) {\r
+ var v = this.getValue();\r
+ if (String(v) !== String(this.startValue)) {\r
+ this.fireEvent("change", this, v, this.startValue);\r
+ }\r
+ this.hasFocus = false;\r
+ this.fireEvent('blur', this);\r
+ }\r
+ }).defer(100, this);\r
+ \r
+ },\r
+ updateDate: function(){\r
+ \r
+ var d = this.df.getValue();\r
+ if (d) {\r
+ if (!Ext.isDate(this.dateValue)) {\r
+ this.initDateValue();\r
+ if (!this.tf.getValue()) {\r
+ this.setTime(this.dateValue);\r
+ }\r
+ }\r
+ this.dateValue.setFullYear(d.getFullYear());\r
+ this.dateValue.setMonth(d.getMonth());\r
+ this.dateValue.setDate(d.getDate());\r
+ }\r
+ else {\r
+ this.dateValue = '';\r
+ this.setTime('');\r
+ }\r
+ },\r
+ updateTime: function(){\r
+ var t = this.tf.getValue();\r
+ if (t && !Ext.isDate(t)) {\r
+ t = Date.parseDate(t, this.tf.format);\r
+ }\r
+ if (t && !this.df.getValue()) {\r
+ this.initDateValue();\r
+ this.setDate(this.dateValue);\r
+ }\r
+ if (Ext.isDate(this.dateValue)) {\r
+ if (t) {\r
+ this.dateValue.setHours(t.getHours());\r
+ this.dateValue.setMinutes(t.getMinutes());\r
+ this.dateValue.setSeconds(t.getSeconds());\r
+ }\r
+ else {\r
+ this.dateValue.setHours(0);\r
+ this.dateValue.setMinutes(0);\r
+ this.dateValue.setSeconds(0);\r
+ }\r
+ }\r
+ },\r
+ initDateValue: function(){\r
+ this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);\r
+ },\r
+ updateHidden: function(){\r
+ if (this.isRendered) {\r
+ var value = Ext.isDate(this.dateValue) ? this.dateValue.format(this.hiddenFormat) : '';\r
+ this.el.dom.value = value;\r
+ }\r
+ },\r
+ updateValue: function(){\r
+ \r
+ this.updateDate();\r
+ this.updateTime();\r
+ this.updateHidden();\r
+ \r
+ return;\r
+ \r
+ },\r
+ setDate: function(date){\r
+ this.df.setValue(date);\r
+ },\r
+ setTime: function(date){\r
+ this.tf.setValue(date);\r
+ },\r
+ isValid: function(){\r
+ return this.df.isValid() && this.tf.isValid();\r
+ },\r
+ validate: function(){\r
+ return this.df.validate() && this.tf.validate();\r
+ },\r
+ focus: function(){\r
+ this.df.focus();\r
+ },\r
+ \r
+ onDisable : function(){\r
+ if(this.rendered){\r
+ this.df.disable();\r
+ this.tf.disable();\r
+ }\r
+ },\r
+ \r
+ onEnable : function(){\r
+ if(this.rendered){\r
+ this.df.enable();\r
+ this.tf.enable();\r
+ }\r
+ }\r
+});\r
+\r
+// register xtype\r
+Ext.reg('xdatetime', Ext.ux.form.DateTime);</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff