Hybrid View

  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
    259
    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
    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