Page 3 of 3 FirstFirst 123
Results 21 to 30 of 30

Thread: Ext.ux.form.field.DateTime

  1. #21
    Sencha User caodegao's Avatar
    Join Date
    Jul 2012
    Location
    CHINA
    Posts
    9
    Vote Rating
    0
      0  

    Default

    good!china

  2. #22
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    0
      0  

    Default

    @zombeerose

    so far so good!

  3. #23
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    138
    Vote Rating
    4
      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
    646
    Vote Rating
    12
      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
    138
    Vote Rating
    4
      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
    141
    Vote Rating
    15
      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
    487
    Vote Rating
    5
      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
    North Italy
    Posts
    114
    Vote Rating
    1
      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
      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!

  10. #30
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default Blur event was not fired

    Hi,

    Thanks for this plugin.
    However, I use it inside a treepanel with CellEditing plugin and the behavior of this component was not the same as other.
    The blur event is not fired when leaving the cell.

    Here is my patch applied to this component :
    Code:
    Index: trunk/src/webui/public/ext/ux/DateTime.js
    ===================================================================
    --- a/trunk/src/webui/public/ext/ux/DateTime.js
    +++ b/trunk/src/webui/public/ext/ux/DateTime.js
    @@ -94,6 +94,9 @@
                         isFormField: false, //exclude from field query's
                         listeners: {
    +                        'select': function () {
    +                            me.onFieldChange();
    +                        },
                             'blur': function () {
    -                            me.onFieldChange();
    +                            me.onFieldBlur();
                             },
                             scope: me
    @@ -112,4 +115,7 @@
                             'select': function () {
                                 me.onFieldChange();
    +                        },
    +                        'blur': function () {
    +                            me.onFieldBlur();
                             },
                             scope: me
    @@ -213,4 +219,14 @@
         },
     
    +    // private
    +    onFieldBlur: function () {
    +        if (
    +            !this.dateField.hasFocus 
    +            && !this.timeField.hasFocus
    +        ) {
    +            this.fireEvent('blur', this, this.getValue());
    +        }
    +    },
    +
         // @inheritdoc
         reset: function () {

Page 3 of 3 FirstFirst 123

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •