1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,552
    Vote Rating
    382
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default XDateField with configurable submitFormat

    XDateField with configurable submitFormat


    Hi all,

    I've run into the problem of submitting date fields to server as they are submitted in their display formats that is very problematic if you develop an international, locale switching application. You have m/d/y in English, d.m.Y, d.m.y or Y-m-d in some European countries. MYSQL server I'm using wants always Y-m-d format.

    Therefore this extension; you can configure date format that is submitted to the server regardless of display date format.

    Enjoy!

    PHP Code:
    // vim: ts=4:sw=4:nu:fdc=2:nospell
    /**
     * Ext.ux.form.XDateField - Date field that supports submitFormat
     *
     * @author  Ing. Jozef Sakalos
     * @version $Id: Ext.ux.form.XDateField.js 471 2009-01-22 23:05:23Z jozo $
     *
     * @license Ext.ux.grid.XDateField is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */

    /*global Ext */

    Ext.ns('Ext.ux.form');

    /**
      * @class Ext.ux.form.XDateField
      * @extends Ext.form.DateField
      */
    Ext.ux.form.XDateField Ext.extend(Ext.form.DateField, {
         
    submitFormat:'Y-m-d'
        
    ,onRender:function() {

            
    // call parent
            
    Ext.ux.form.XDateField.superclass.onRender.apply(thisarguments);

            var 
    name this.name || this.el.dom.name;
            
    this.hiddenField this.el.insertSibling({
                 
    tag:'input'
                
    ,type:'hidden'
                
    ,name:name
                
    ,value:this.formatHiddenDate(this.parseDate(this.value))
            });
            
    this.hiddenName name// otherwise field is not found by BasicForm::findField
            
    this.el.dom.removeAttribute('name');
            
    this.el.on({
                 
    keyup:{scope:thisfn:this.updateHidden}
                ,
    blur:{scope:thisfn:this.updateHidden}
            }, 
    Ext.isIE 'after' 'before');

            
    this.setValue this.setValue.createSequence(this.updateHidden);

        } 
    // eo function onRender

        
    ,onDisable: function(){
            
    // call parent
            
    Ext.ux.form.XDateField.superclass.onDisable.apply(thisarguments);
            if(
    this.hiddenField) {
                
    this.hiddenField.dom.setAttribute('disabled','disabled');
            }
        } 
    // of function onDisable

        
    ,onEnable: function(){
            
    // call parent
            
    Ext.ux.form.XDateField.superclass.onEnable.apply(thisarguments);
            if(
    this.hiddenField) {
                
    this.hiddenField.dom.removeAttribute('disabled');
            }
        } 
    // eo function onEnable

        
    ,formatHiddenDate : function(date){
            if(!
    Ext.isDate(date)) {
                return 
    date;
            }
            if(
    'timestamp' === this.submitFormat) {
                return 
    date.getTime()/1000;
            }
            else {
                return 
    Ext.util.Format.date(datethis.submitFormat);
            }
        }

        ,
    updateHidden:function() {
            
    this.hiddenField.dom.value this.formatHiddenDate(this.getValue());
        } 
    // eo function updateHidden

    }); // end of extend

    // register xtype
    Ext.reg('xdatefield'Ext.ux.form.XDateField);

    // eof 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Default


    Thanks,

    That's something which sould have been native

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    100
    Vote Rating
    0
    vivid-planet is on a distinguished road

      0  

    Default


    Some time ago I posted a similar solution:
    http://extjs.com/forum/showthread.php?t=7157

    I tweaked the SubmitAction posted in this thread a bit further, it uses getValue now for all Fields. (Useful for eg. Checkbox, DateField, ComboBox)
    Code:
    Vps.SubmitAction = function(form, options){
        Vps.SubmitAction.superclass.constructor.call(this, form, options);
    };
    
    Ext.extend(Vps.SubmitAction, Ext.form.Action.Submit, {
        run : function(){
            if (!this.options.params) this.options.params = {};
    
            this.form.items.each(function(field) {
                if (field.disabled) {
                    this.options.params[field.getName()] = null;
                } else if (Ext.form.Checkbox && field instanceof Ext.form.Checkbox) {
                    if (field.getValue()) {
                        this.options.params[field.getName()] = 1;
                    } else {
                        this.options.params[field.getName()] = 0;
                    }
                } else if (field.rendered && field.el.dom.type == 'file') {
                    //skip, can't be read out through JS
                    return;
                } else {
                    var v = field.getValue();
                    if (typeof v == 'object') {
                        v = Ext.encode(v);
                    }
                    this.options.params[field.getName()] = v;
                }
                if (field.rendered) {
                    field.realName = field.getName();
                    field.el.dom.name = '';
                }
            }, this);
    
            Vps.SubmitAction.superclass.run.call(this);
    
            //restore names
            this.form.items.each(function(field) {
                if (field.realName) {
                    field.el.dom.name = field.realName;
                    delete field.realName;
                }
            }, this);
        }
    });
    Ext.form.Action.ACTION_TYPES.submit = Vps.SubmitAction;

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,552
    Vote Rating
    382
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Nice code!

    I was also thinking about overriding the submit action but finally I've decided against it to avoid introducing any new bugs int tons of code of the running application. Further, the code above doesn't solve the problem of configurable submit format for DateField.

    I decided to use extension as developer can freely choose if he needs XDateField or if DateField is enough for his purpose. I will make same extensions for TimeField and Checkbox (will give it also a nicer look) without touching the submit action.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,552
    Vote Rating
    382
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by tof View Post
    Thanks,

    That's something which sould have been native

    I also think so, however, the library was created in US where internationalization may very easy slip out of the attention as everywhere around there the date is m/d/y. Here in Europe we need to think about it very carefully as if we want to sell our software in wider than 300 km range it needs to be localized or, at least, ready for localization.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Default


    Indeed, but that's not only for i18n; my server-side framework treats timestamps as "epoch", and I had to make a DateField like this which send/read epoch, whatever the displayFormat.
    Of course you're code is a lot much cleaner

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Nice addon, I would also like to see this add to the core. Maybe with
    if(submitFormat) {
    // create hidden field and stuff
    }

  8. #8
    Ext User mash-morgan's Avatar
    Join Date
    Feb 2008
    Location
    Wales - where men are men and sheep are nervous
    Posts
    4
    Vote Rating
    0
    mash-morgan is on a distinguished road

      0  

    Default EXT Future

    EXT Future


    This should go into the proper DateField imho.

    Its silly that there is one format for display and not one for data.

    While Im at it.

    Also with a Combobox...
    the {hiddenName:} should default to {name:} unless otherwise specified

  9. #9
    Ext User mirage's Avatar
    Join Date
    Apr 2007
    Location
    Wisconsin, USA
    Posts
    114
    Vote Rating
    0
    mirage is on a distinguished road

      0  

    Default


    Saki -

    First of all thanks for this. I get two errors with your code:

    1. Ext.isDate() is not a function. I'm running 2.0.1. Is that another extension of yours?

    2. When clicking the trigger, Firebug says:
    Code:
    value.clearTime is not a function
    setValue("1974-04-29 00:00:00")
    onTriggerClick()
    h(Object browserEvent=Event mouseout button=0 type=mouseout)
    getViewWidth(click clientX=0, clientY=0)
    this.value = value.clearTime(true);

    Can you help me figure out what's going wrong? My date values come through from mysql as timestamps or datetime.

    Thanks!

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,552
    Vote Rating
    382
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Ext.isDate() is in SVN - you can replace it with:

    PHP Code:

    if(xxx instanceof Date) {
        ....

    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM