1. #1
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      1  

    Default Ext.ux.form.field.DateTime

    Ext.ux.form.field.DateTime




    it's a beta version, and some question: (help~plz)
    1.if i don't set width/height, then DateTime in toolbar is missing
    2. cant show correct width in RowEditing plugin


    Code:
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins: {
            field: 'Ext.form.field.Field'
        },
        alias: 'widget.datetimefield',
        layout: 'hbox',
        width: 200,
        height: 22,
        combineErrors: true,
        msgTarget :'side',
        
        dateCfg:{},
        timeCfg:{},
        
        initComponent: function() {
            var me = this;
            me.buildField();
            me.callParent();
            this.dateField = this.down('datefield')
            this.timeField = this.down('timefield')
            me.initField();
        },
        
        //@private
        buildField: function(){
            this.items = [
                Ext.apply({
    	            xtype: 'datefield',
    	            format: 'Y-m-d',
    	            width: 100
    	        },this.dateCfg),
    	        Ext.apply({
    	            xtype: 'timefield',
    	            format: 'H:i',
    	            width: 80
    	        },this.timeCfg)
            ]
        },
        
        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)
        },
        
        getSubmitData: function(){
            var value = this.getValue()
            var format = this.getFormat()
            return value ? Ext.Date.format(value, format) : null;
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
        }
    })
    Attached Images
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  2. #2
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    anyone could help? thanks
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    This extension works well for what I needed in a form, however I'm having trouble setting the value of the fields. My form is bound to a grid and the model for my store has a value defined like this

    Code:
    {name: 'pubDate',
    mapping: 'pubDate'
    }
    when I select a record in the grid the datetimefield does not display the value. the value in the record is like this : "pubDate":"2011-06-26 01:00:00"

    what am I doing wrong?

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    257
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Thanks for this code! I've taken the liberty to extend the code a bit, but be careful, it has not been tested very much till now.

    Added features:
    - A button to set "now" and clear the value (set btnNowText:'' to hide the button).
    - A dateTimeFormat which makes the submitted value format more flexible. It's also used as the input for setValue (@Dmoney: Does this solve your problem?).

    There are 3 known issues:
    - The button width changes when the button text changes which looks a bit strange in my eyes (Any idea how to make the button stay on the widest width concerning both possible texts)?
    - I'm not quite sure if this getSubmitData-thing is a bug.
    - The readOnly-config doesn't work so far.

    Code:
    Ext.namespace('Ext.ux.form');
    
    Ext.define('Ext.ux.form.DateTime', 
    {
        extend:'Ext.form.FieldContainer'
        ,mixins: 
        {    field: 'Ext.form.field.Field'
        }
        ,alias: 'widget.xdatetime'
            
        ,combineErrors: true
        ,msgTarget: 'under'
        
        ,layout: 'hbox'
        ,dateFormat: 'Y-m-d',
        ,timeFormat: 'H:i:s'
        ,dateTimeFormat: 'Y-m-d H:i:s'
        ,dateCfg:{}
        ,timeCfg:{}
        ,btnCfg:{}
            
        ,btnNowText: 'Set now'
        ,btnClearText: 'Clear'
    
        ,readOnly: false // ReadOnly
        
        // internal
        ,dateValue: null // Holds the actual date  
        ,dateField: null
        ,timeField: null
        ,btnField: null
    
        ,initComponent: function()
        {    var me = this;        
            me.items = me.itmes || [];
            me.items.push(Ext.apply(
            {    xtype: 'datefield',
                 format: me.dateFormat,
                 flex: 1,
                 submitValue: false,
                 listeners:
                {    change: Ext.bind(this.onChange, this)           
                }
             }, me.dateCfg));
            me.items.push(Ext.apply(
            {    xtype: 'timefield',
                format: me.timeFormat,
                flex: 1,
                submitValue: false,
                 listeners:
                 {    change: Ext.bind(this.onChange, this)    
                 }
            }, me.timeCfg));
            
            if (me.btnNowText && !me.readOnly)
            {    me.items.push(
                    Ext.apply(
                    {    xtype: 'button',
                        text: me.btnNowText,
                        flex: 0,
                        autoWidth: false,                    
                        handler: Ext.bind(this.onBtnClick, this)
                    })
                );
            }
        
            me.callParent();
            
            me.dateField = me.down('datefield');
            me.timeField = me.down('timefield');
            me.btnField = me.down('button');
               me.initField();
        }
     
        ,getValue: function() 
        {     var value = null,
                    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;
        }
        
        ,getSubmitValue: function()
        {    var value = this.getValue();
            return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
        }
     
        ,setValue: function(value) 
        {    if (Ext.isString(value))
            {    value = Ext.Date.parse(value, 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)
        }
        
        ,updateBtn: function()
        {    if (!this.btnField) return;
            if (this.getSubmitValue() === null)
            {    this.btnField.setText(this.btnNowText);
            }
            else
            {    this.btnField.setText(this.btnClearText);
            }
        }
        
        ,onBtnClick: function(btn, e)
        {    if (this.getSubmitValue() == null)
            {    this.setValue(new Date());
            }
            else
            {    this.setValue(null);
            }
        }
        
        ,onChange: function( field, newValue, oldValue, options )
        {    this.updateBtn();        
        }
        
        // 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;
               }
    });

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    @ontho

    Thanks for posting your your code. Your changes fixed my problem and everything is working great! The clear button and Set Now feature is a great addition as well. Thanks Again!

  6. #6
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    Both versions I get the errors:
    • Uncaught TypeError: Object [object Object] has no method 'getDesiredWidth'
    • Uncaught TypeError: Cannot call method 'setStyle' of undefined

    I am using 4.0.2a, any thoughts?

    Thanks in advanced.

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    257
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    I am using 4.0.2a as well and it's working - could you perhaps post a code which reproduces the errors?

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    jakob.ketterl is on a distinguished road

      0  

    Default


    i've worked a little on this to get it to display in a cell editing grid under 4.0.2

    i've stripped out the button since i didn't need it and it only caused me pain, sorry for that

    it's most probably not perfect, but maybe this will be of use to somebody.
    here's the code:

    Code:
    Ext.define('Ext.ux.form.field.DateTime', 
    {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        combineErrors: true,
        msgTarget: 'under',
        
        layout: 'hbox',
        dateFormat: 'Y-m-d',
        timeFormat: 'H:i:s',
        dateTimeFormat: 'Y-m-d H:i:s',
        dateCfg:{},
        timeCfg:{},
    
        readOnly: false,
        
        // internal
        dateValue: null, // Holds the actual date  
        dateField: null,
        timeField: null,
    
        initComponent: function(){
            var me = this;        
            me.items = me.itmes || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                submitValue:false
            }, me.dateCfg));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                submitValue:false
            }, me.timeCfg));
            me.items.push(me.timeField);
            
            for (var i = 0; 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){
                    var 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();
    
            if(date)
            {
                if(time)
                {
                    var 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;
        },
     
        setValue: function(value){    
            if (Ext.isString(value))
            {
                value = Ext.Date.parse(value, 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;
        }
    });

  9. #9
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    Quote Originally Posted by ontho View Post
    I am using 4.0.2a as well and it's working - could you perhaps post a code which reproduces the errors?
    I discovered that my problem was that I was using CellEditing. Once I switched to RowEditing it worked fine. Any simple fix to make it work with CellEditing?

    I receive the error:
    Uncaught TypeError: Cannot read property 'dom' of undefined

  10. #10
    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

      0  

    Default Minor tweaks + docs

    Minor tweaks + docs


    * fixed the "itmes" spelling error.
    * renamed dateCfg/timeCfg to dateConfig/timeConfig for consistency with Ext framework.
    * added class/config docs.

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @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)
     */
    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
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * 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;        
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (var i = 0; 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){
                    var 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();
    
            if(date)
            {
                if(time)
                {
                    var 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;
        },
     
        setValue: function(value){    
            if (Ext.isString(value))
            {
                value = Ext.Date.parse(value, 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