Results 1 to 2 of 2

Thread: Ext.ux.form.DateFieldPlus

  1. #1
    Sencha User willf1976's Avatar
    Join Date
    May 2009
    Location
    carpinteria, ca
    Posts
    84
    Vote Rating
    0
      0  

    Default Ext.ux.form.DateFieldPlus

    Hi All

    I have been going through the classes we have developed and sharing back with the community some of them that I think will be useful to others. These components have been tested in ext-3.2.1.

    Here is: Ext.ux.form.DateFieldPlus

    A date field that can submit a different value than it displays via a hidden field

    Code:
    /**
     * @author Will Ferrer, Ethan Brooks
     * @copyright (c) 2012, Intellectual Property Private Equity Group
     * @licensee 2012 developed under license for Switchsoft LLC http://www.switchsoft.com a "Direct response telephony company" as part of it's "VOIP Call distribution, ROI analysis platform, call recording, and IVR for inbound and outbound sales" and Run the Business Systems LLC a "Technology development investment group" as part of it's "PHP, Javascript rapid application development framework and MySQL analysis tools"
     * @license 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.
     * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
     * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
    * We are pretty nice just ask. We want to meet you licensee 
    *
    */
    
    /**
     * @class Ext.ux.form.DateFieldPlus
     * @extends Ext.form.TriggerField
     * A date field that can submit a different value than it displays via a hidden field
     * @constructor
     * @param {Object} config The config object
     */
    Ext.ns('Ext.ux.form');
    Ext.ux.form.DateFieldPlus = Ext.extend(Ext.form.DateField, {
        /**
        * @cfg {Array} inputFormats
        * Text formats which the clock will accept if passed to its setValue function. Defaults to ['H:i:s', 'Y-m-d H:i:s']
        */
        inputFormats : ['Y-m-d', 'Y-m-d H:i:s'],
        /**
        * @cfg {Boolean} outputRawDate
        * if set to true causes the getValue function to return a date object instead of a formated date string. Defaults to false
        */
        outputRawDate : false,
        /**
        * @cfg {String} outputFormat
        * format to convert dates to when the getValue function is called (a date object will be returned instead of a string if outputRawDate is set to true). Defaults to "H:i:s"
        */
        outputFormat : "Y-m-d H:i:s",
        /**
        * @cfg {String} format
        * The default date format string which can be overriden for localization support. The format must be valid according to Date.parseDate. Defaults to "g:i A"
        */
        format: "m/d/Y",
        /**
        * @cfg {String} displayFormat
        * Format to display the date as inside the trigger field. Defaults to "g:i A"
        */
        displayFormat : 'm/d/Y',
        
        /**
        * @cfg {String} hiddenName
        * name of a hidden field that will contain the date formated via the outputFormat. Defaults to false
        */
        hiddenName : 'hiddenDate',
        /**
        * @cfg {String} submitValue
        * whether or not to submit this field. Defaults to true
        */
        submitValue : true,
        
        /**
        * @cfg {Boolean} useRawSetValue
        * if true we use the value passed to the setValue function to update the hidden field instead of using the getValue method. Defaults to false
        */
        useRawSetValue : false,
        
        // @private
        rawSetValue : null,
        
        /**
         ** Public Function: getValue
         * Gets the value of the field. If outputRawDate is set to true then a date object is returned. Other wise a string formated using the outputFormat property will be returned.
         */
        getValue: function(){
            return Ext.ux.form.DateFieldPlus.superclass.getValue.call(this);
            
        },
        /**
         ** Public Function: getValue
         * Gets the value of the field hiddenName field
         */
        getOutputValue: function(){
            return this.hiddenField.value;
        },
        /**
         ** Public Function: getRawValue
         * Gets the text that is currently displayed in the field
         */
        getRawValue: function(){
            return this.el.dom.value;
        },
        /**
         ** Public Function: setValue
         * Set the value of the clock field. If a date is passed it will be used as is, if a string is passed the code will try to parse it using the formats in the inputFormats array, if nothing is passed the current date will be used.
         * @param {Date|String} value (Optional) Defaults to new Date()
         */
        setValue: function(value){
            var n, date, value,
                inputFormats = this.inputFormats;
            if (!Ext.isDate(value)) {
                for(n=0;n<inputFormats.length;n++) {
                    date = Date.parseDate(value, inputFormats[n]);
                    if (Ext.isDate(date)) {
                        value = date;
                        break;
                    }
                }
            }
            this.rawSetValue = value;
            Ext.ux.form.DateFieldPlus.superclass.setValue.call(this, value);
            this.updateHiddenField();
        },
        /**
         ** Public Function: updateHiddenField
         * updates the hidden field created by the hiddenName property
         */
        updateHiddenField: function(){
            var date = (this.useRawSetValue)?this.rawSetValue:this.getValue(),
                parsedDate;
            if (Ext.isDate(date)) {
                parsedDate = date.format(this.outputFormat);
                this.hiddenField.value = parsedDate;
            }
        },
        // @private
        validateValue: Ext.form.DateField.prototype.validateValue,
        // @private
        validate: Ext.form.DateField.prototype.validate,
        // @private
        parseDate: Ext.form.DateField.prototype.parseDate,
        // @private
        formatDate: Ext.form.DateField.prototype.formatDate,
        // @private
        initComponent : function () {
            if (this.hiddenName == this.name) {
                this.name = this.name + 'Raw';
            }
            Ext.ux.form.DateFieldPlus.superclass.initComponent.call(this);
            this.on('select', this.updateHiddenField, this);
        },
        // private
        onRender : function(ct, position){
            /*if(this.hiddenName && !Ext.isDefined(this.submitValue)){
                this.submitValue = false;
            }*/
            Ext.ux.form.DateFieldPlus.superclass.onRender.call(this, ct, position);
            if(this.hiddenName){
                this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName/*,
                        id: (this.hiddenId||this.hiddenName)*/}, 'before', true);
    
            }
            /*if (this.submitValue == false) {
                this.el.dom.removeAttribute('name');
            }*/
            /*if(Ext.isGecko){
                this.el.dom.setAttribute('autocomplete', 'off');
            }*/
    
            /*if(!this.lazyInit){
                this.initList();
            }else{
                this.on('focus', this.initList, this, {single: true});
            }*/
        }
    });
    Ext.reg('datefieldplus', Ext.ux.form.DateFieldPlus);
    Best regards

    Will Ferrer (Run the Business)

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Vote Rating
    1297
      0  

    Default

    Thanks for the contribution!
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Tags for this Thread

Posting Permissions

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