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

      0  

    Default


    * Removed the 'dateTimeFormat' config - use dateFormat & timeFormat instead.
    * Exclude date & time fields from form query operations. Otherwise, calling form.getForm().getFieldValues(false) returns field containers and sub-fields in values object.

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.2 (July 20th, 2011)
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
     * @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * @link http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
    //    /**
    //     * @cfg {String} dateTimeFormat
    //     * The format used when submitting the combined value.
    //     * Defaults to 'Y-m-d H:i:s'
    //     */
    //    dateTimeFormat: 'Y-m-d H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
        initComponent: function(){
            var me = this
                ,i = 0
                ,key
                ,tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
                me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom:{},
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null
                ,date = this.dateField.getSubmitValue()
                ,time = this.timeField.getSubmitValue()
                ,format;
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
    //        var value = this.getValue();
    //        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
            
            var me = this
                ,format = me.getFormat()
                ,value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){    
            if (Ext.isString(value)){
                value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this
                ,data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    //eo file

  2. #12
    Sencha User
    Join Date
    May 2011
    Location
    Oslo
    Posts
    7
    Vote Rating
    0
    espeak is on a distinguished road

      0  

    Default isValid missing?

    isValid missing?


    This works great, however isValid() seems to be missing (or I am using it wrong). This fixed it for me:

    PHP Code:
        isValid: function() {
             return 
    this.dateField.isValid() && this.timeField.isValid();
        } 

  3. #13
    Sencha User
    Join Date
    Apr 2010
    Posts
    12
    Vote Rating
    0
    tayfun.ozis.erikan is on a distinguished road

      0  

    Default allowBlank property is missing

    allowBlank property is missing


    Minor addition for me.

    Code:
    //LINE 55:    
    allowBlank: true,
    Code:
    //...
    me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
        format:me.dateFormat,
        flex:1,
        margin: '0 5 0 0',
        allowBlank: me.allowBlank, // set as Default false
        isFormField:false, //exclude from field query's
        submitValue:false
    }, me.dateConfig));
    //...
    me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
        format:me.timeFormat,
        flex:1,
        allowBlank: me.allowBlank,  // set as Default false
        isFormField:false, //exclude from field query's
        submitValue:false
    }, me.timeConfig));

  4. #14
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    TomJones is on a distinguished road

      0  

    Default


    I added this to my code and getting these errors:


    giving me this error, when clicking on date cell:


    Code:
    Uncaught TypeError: Object #<Object> has no method 'removeAttribute' ext-all-debug.js:70898
    Ext.define.beginLayoutShrinkWrap ext-all-debug.js:70898
    Ext.define.beginLayout ext-all-debug.js:70861
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.beginLayout ext-all-debug.js:72183
    Ext.define.resetLayout ext-all-debug.js:56620
    Ext.define.invalidate ext-all-debug.js:56362
    Ext.define.invalidate ext-all-debug.js:56350
    Ext.define.flushInvalidates ext-all-debug.js:56204
    Ext.define.run ext-all-debug.js:56670
    Ext.define.statics.flushLayouts ext-all-debug.js:44984
    Ext.define.statics.updateLayout ext-all-debug.js:45015
    Ext.define.updateLayout ext-all-debug.js:46626
    Ext.define.onShow ext-all-debug.js:45425
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:58013
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:78098
    Base.implement.callParent ext-all-debug.js:3732
    Ext.define.onShow ext-all-debug.js:78223
    Ext.define.show ext-all-debug.js:57993
    Ext.define.startEdit ext-all-debug.js:78031
    call ext-all-debug.js:8423



    and when deselecting cell, getting this :


    Code:
    Uncaught TypeError: Object #<Object> has no method 'getTarget' ext-all-debug.js:78142
    Ext.define.onFieldBlur ext-all-debug.js:78142
    call ext-all-debug.js:8423

    This is how I apply it on my column:

    Code:
    {
                        xtype : 'enddatecolumn',
    					format: 'd/m/Y G:i',
    					width: 150,
    					align : 'center',
    					
    					 field       : {
    						xtype       : 'xdatetime'
    					}
                    }

  5. #15
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    TomJones is on a distinguished road

      0  

    Default


    ok I removed some lines from ext-all-debug.js and it gave me no errors.
    Now the problem is that, when I edit the date, and press ENTER, date changes.

    But when I edit the time, and press enter, it pops back to its original value. How can i fix this?


    unimportant lines I removed, i guess they are useless:


    Code:
          /*  if (e && Ext.fly(target = e.getTarget()).focusable()) {
                target.focus();
            } */

    Code:
     //  inputEl.dom.removeAttribute('size');

  6. #16
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,735
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    This works quite well for me:

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.2 (July 20th, 2011)
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
     * @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * @link http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
    //    /**
    //     * @cfg {String} dateTimeFormat
    //     * The format used when submitting the combined value.
    //     * Defaults to 'Y-m-d H:i:s'
    //     */
    //    dateTimeFormat: 'Y-m-d H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
        initComponent: function(){
            var me = this
                ,i = 0
                ,key
                ,tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
                me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom: document.createElement('div'),
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent(arguments);
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item, e){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me, e);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null
                ,date = this.dateField.getSubmitValue()
                ,time = this.timeField.getSubmitValue()
                ,format;
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
    //        var value = this.getValue();
    //        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
            
            var me = this
                ,format = me.getFormat()
                ,value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){    
            if (Ext.isString(value)){
                value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this
                ,data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    //eo file

  7. #17
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    zhengeili is on a distinguished road

      0  

    Default


    国人的 哈哈

  8. #18
    Sencha User Jad's Avatar
    Join Date
    Feb 2012
    Location
    annecy france
    Posts
    61
    Vote Rating
    1
    Jad is on a distinguished road

      0  

    Default


    Hi mankz

    I use your code with Ext.grid.plugin.CellEditing and the editor is closed immediately after it's opened.

    anny idea to fix it ?

    grid column code
    Code:
    {
                        text: module.getLocale().translate(me.$className, 'departureDate', 'Departure Date'),
                        format: Ext.Date.patterns.ShortDate,
                        flex: 1,
                        dataIndex: 'departureDate',
                        itemId: 'departureDate',
                        renderer: function(value) {
                            try { return value ? Ext.Date.format(value, Ext.Date.patterns.DateTime) : ''; }
                            catch (ex) {}
                        },
                        editor: { xtype: 'xdatetime' }
                    },

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

      0  

    Default


    @zombeerose what is the rationale behind commenting out the dateTimeFormat option? Unless i'm missing something, this would make it quite the chore to submit the field as an epoch

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

      1  

    Default


    @danderson

    Interesting point. I don't use epoch formatting so never considered the case.
    I had initially removed it because it appeared redundant to dateFormat + timeFormat.

    I basically re-added the option in the same context as before but I don't specify a default value. IF you specify dateTimeFormat, it will take precedence over the separate formats.
    See if this works for you.

    Code:
    
    
    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @version 0.3 (October 26th, 2012)
     * @author [atian25](http://www.sencha.com/forum/member.php?51682-atian25)
     * @author [ontho](http://www.sencha.com/forum/member.php?285806-ontho)
     * @author [jakob.ketterl](http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     * [Forum Thread](http://www.sencha.com/forum/showthread.php?134345-Ext.ux.form.field.DateTime)
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * Convenience config for specifying the format of the date portion.
         * This value is overridden if format is specified in the dateConfig.
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        
        /**
         * @cfg {String} dateTimeFormat
         * An optional format used in place of {@link #dateFormat} and {@link timeFormat} to 
         * allow support for combined formatting, such as enoch, when calling 
         * {@link #getSubmitValue} and {@link setValue}.
         */
        
        /**
         * @cfg {String} timeFormat
         * Convenience config for specifying the format of the time portion.
         * This value is overridden if format is specified in the timeConfig. 
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
    
        initComponent: function(){
            var me = this,
                i = 0,
                key,
                tab;
                
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                isFormField:false, //exclude from field query's
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (; i < me.items.length; i++) {
                me.items[i].on('focus', me.onItemFocus, me);
                me.items[i].on('blur', me.onItemBlur, me);
                me.items[i].on('select', me.onItemSelect, me);
                me.items[i].on('specialkey', function(field, event){
                    key = event.getKey();
                    tab = key == event.TAB;
                    
                    if (tab && me.focussedItem == me.dateField) {
                        event.stopEvent();
                        me.timeField.focus();
                        return;
                    }
                    
                    me.fireEvent('specialkey', field, event);
                });
            }
    
    
            me.callParent();
            
            // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
            this.inputEl = {
                dom:{},
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
        
        onItemFocus:function(item){
            if (this.blurTask){
                this.blurTask.cancel();
            }
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            var me = this;
            if (item != me.focussedItem){ return; }
            // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
            me.blurTask = new Ext.util.DelayedTask(function(){
                me.fireEvent('blur', me);
            });
            me.blurTask.delay(100);
        },
        
        /**
         * @private Handles focus event
         */
        onItemSelect:function() {
            this.fireEvent("select", this);
        },
        
        getValue: function(){
            var value = null,
                date = this.dateField.getSubmitValue(),
                time = this.timeField.getSubmitValue(),
                format;
    
    
            if (date){
                if (time){
                    format = this.getFormat();
                    value = Ext.Date.parse(date + ' ' + time, format);
                } else {   
                    value = this.dateField.getValue();
                }
            }
            return value;
        },
        
        getSubmitValue: function(){   
            var me = this,
                format = me.dateTimeFormat || me.getFormat(),
                value = me.getValue();
                
            return value ? Ext.Date.format(value, format) : null;        
        },
     
        setValue: function(value){
            var format;
            
            if (Ext.isString(value)){
                format = this.dateTimeFormat || this.getFormat();
                value = Ext.Date.parse(value, format); //this.dateTimeFormat
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            var df = this.dateField,
                tf = this.timeField;
            return ((df.submitFormat || df.format) + " " + (tf.submitFormat || tf.format));
        },
        
        // Bug? A field-mixin submits the data from getValue, not getSubmitValue
        getSubmitData: function(){
            var me = this,
                data = null;
                
            if (!me.disabled && me.submitValue && !me.isFileUpload()) {
                data = {};
                data[me.getName()] = '' + me.getSubmitValue();
            }
            return data;
        }
    });
    
    
    //eo file

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi