+++ /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