Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Blame | Last modification | View Log | RSS feed 

/*
 * Ext JS Library 0.20
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.namespace('Ext.ux.form');

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

// register xtype
Ext.reg('xdatetime', Ext.ux.form.DateTime);