1. #21
    Sencha User caodegao's Avatar
    Join Date
    Jul 2012
    Location
    CHINA
    Posts
    8
    Vote Rating
    0
    caodegao is on a distinguished road

      0  

    Default


    good!china

  2. #22
    Sencha User
    Join Date
    Dec 2007
    Posts
    39
    Vote Rating
    0
    danderson is on a distinguished road

      0  

    Default


    @zombeerose

    so far so good!

  3. #23
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    116
    Vote Rating
    0
    JacobGu is on a distinguished road

      0  

    Default


    This method needs to be added:

    Code:
        resetOriginalValue: function () {
            this.dateField.resetOriginalValue();
            this.timeField.resetOriginalValue();
        }

  4. #24
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      1  

    Default


    @JacobGu
    I have added the resetOriginalValue method. I have also posted the code on github to make future contributions easier.

    https://github.com/zombeerose/DateTime

    NOTE: I refactored the code a bit because the previous implementation was creating a dummy inputEl, which was creating various problems (didn't work in 4.1.3). I have since reworked it using the Ext.calendar.form.field.DateRange example field as a model. Hopefully will be more in line with Sencha's best practices.

  5. #25
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    116
    Vote Rating
    0
    JacobGu is on a distinguished road

      0  

    Default


    Thanks.

    I think it also needs:

    Code:
        onFieldDirtyChange: function () {
            this.checkDirty();
        }
    and the following listener in both the date and time field objects:

    Code:
    'dirtychange': function () {
                                me.onFieldDirtyChange();
                            }

  6. #26
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    110
    Vote Rating
    -2
    predator has a little shameless behaviour in the past

      0  

    Default


    Hi,

    form.loadRecord(record);

    Does not load the field.

    console.log(value); in setValue(value);

    shows as undefined.

    It works great when used as grid editor for a field, but in a plain form cannot load its value.

    /A

  7. #27
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    443
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    I get this error on the line that creates the time field (seems to be related to attempting to use loadRecord into the field from a data store...perhaps?):

    Cannot call method 'on' of undefined



  8. #28
    Sencha Premium Member seek's Avatar
    Join Date
    Sep 2008
    Location
    Italy
    Posts
    112
    Vote Rating
    1
    seek is on a distinguished road

      0  

    Default


    Hi all, and thanks for this plugin!
    All works perfectly, but there is a little problem when I leave the cell grid after editing: I must do a double click to another line in the grid, in order to confirm data (and get rid of pickers).
    I'm using ExtJS 4.1.1a

    Immagine.png

    Any suggestion?
    Thanks
    Seek

  9. #29
    Sencha User
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    Jojo79 is on a distinguished road

      0  

    Default


    @atian25 - Thank you for the code.

    I have extended the code to include a hidden field so that date time value get submitted as a form field.

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     *
     * DateTime field, combination of DateField and TimeField
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author Jojo79 (http://www.sencha.com/forum/member.php?321626-Jojo79)
     */
    Ext.ns('Ext.ux.form');
    
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins: {
            field: 'Ext.form.field.Field'
        },
        alias: ['widget.xdatetime'],
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        
        dateFormat:'m/d/y',
        timeFormat:'g:i A',
        
        height: 22,
        style: {
            width : "100%"
        },
        dateCfg:{},
        timeCfg:{},
        valueCfg:{},
        
        initComponent: function() {
            var me = this;
            me.buildField();
            me.callParent();
            this.dateField = this.down('datefield');
            this.timeField = this.down('timefield');
            this.valueField = this.down('hiddenfield');
            me.initField();
        },
    
        //@private
        buildField: function(){
            this.items = [
                Ext.apply({
                    xtype: 'datefield',
                    id: this.id + "-date",
                    name : this.name + "-date",
                    format: this.dateFormat || Ext.form.DateField.prototype.format,
                    flex: .55,
                    margin: '0 1 0 0',
                    submitValue: false,
                    listeners : {     
                        'change':function ( dateObj, newValue, oldValue, eOpts ){            
                                    this.ownerCt.onUpdateDate();
                                 }
                    }
                },this.dateCfg),
                Ext.apply({
                    xtype: 'timefield',
                    id: this.id + "-time",
                    name : this.name + "-time",
                    format: this.timeFormat || Ext.form.TimeField.prototype.format,
                    flex: .45,
                    margin: '0 0 0 1',
                    submitValue: false,
                    listeners : {     
                        'change':function ( dateObj, newValue, oldValue, eOpts ){            
                                    this.ownerCt.onUpdateTime();
                                 }
                    }
                },this.timeCfg),
                Ext.apply({
                    xtype: 'hiddenfield',
                    id: this.id + "-datetimevalue",
                    name: this.name + "-datetimevalue",
                    value: '',
                    getValue: function(){
                if(this.ownerCt) {
                    return this.ownerCt.getValue();
                }else{
                    return;
                } 
            },
            getSubmitData: function(){
                data = {};
                if(this.ownerCt){
                    data[this.ownerCt.name] = '' + this.ownerCt.getRawValue()
                }
                return data;
            }
                }, this.valueCfg)
            ]
        },
    
        getValue: function() {
            var value = '',date = this.dateField.getSubmitValue(),time = this.timeField.getSubmitValue();
            if(date){
                if(time){
                    var format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time,format);
                }else{
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
    
        setValue: function(value){
            this.dateField.setValue(value);
            this.timeField.setValue(value);
            this.valueField.value = this.getRawValue();
        },
    
        getSubmitData: function(){
            data = {};
            return  data[this.name] = '' + this.getRawValue();
        },
    
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
        },
        
        getRawValue: function() {
            if(this.getValue()){
                return '' + this.getValue().getTime();
            }
            return '';
        },
        
        getTime: function() {
            if(!Ext.isEmpty(this.getValue())){
                return this.getValue().getTime();
            }
        },
        
        initDateValue:function() {
            return new Date();
        },
    
        onUpdateDate:function() {
            var d = this.dateField.getValue();
            if(!d){
                this.timeField.setValue('');
            }
            if(d && !(d instanceof Date)) {
                d = Ext.Date.parse(d, this.dateField.format);
            }
            if(d && !this.timeField.getValue()) {
                this.timeField.setValue(this.initDateValue());
            }
            this.valueField.value = this.getRawValue(); 
        },
        
        onUpdateTime:function() {
            var t = this.timeField.getValue();
            if(t && !(t instanceof Date)) {
                t = Ext.Date.parse(t, this.timeField.format);
            }
            if(t && !this.dateField.getValue()) {
                this.dateField.setValue(this.initDateValue());
            }
            this.valueField.value = this.getRawValue();
        }
        
    })
    Thanks!