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

      0  

    Default Ext.ux.form.DateFieldPlus

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the contribution!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

Thread Participants: 1

Tags for this Thread