Hybrid View

  1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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 [new version] DateTime Field

    [new version] DateTime Field



    EDIT:
    due to the limitations of the first version that I've posted here originally I've completely re-written the DateTime field. This is new code:

    PHP Code:
    <html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <
    link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
        <
    script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
        <script type="text/javascript">

    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /*global Ext */
    /**
     * @class Ext.ux.form.DateTime
     * @extends Ext.form.Field
     *
     * DateTime field, combination of DateField and TimeField
     *
     * @author      Ing. Jozef Sakáloš
     * @copyright (c) 2008, Ing. Jozef Sakáloš
     * @version   2.0
     * @revision  $Id: Ext.ux.form.DateTime.js 813 2010-01-29 23:32:36Z jozo $
     *
     * @license Ext.ux.form.DateTime 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.
     * 
     * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
     * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
     *
     * @forum      22661
     *
     * @donate
     * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
     * <input type="hidden" name="cmd" value="_s-xclick">
     * <input type="hidden" name="hosted_button_id" value="3430419">
     * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
     * border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
     * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
     * </form>
     */

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

    /**
     * Creates new DateTime
     * @constructor
     * @param {Object} config A config object
     */
    Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
        /**
         * @cfg {Function} dateValidator A custom validation function to be called during date field
         * validation (defaults to null)
         */
         dateValidator:null
        /**
         * @cfg {String/Object} defaultAutoCreate DomHelper element spec
         * Let superclass to create hidden field instead of textbox. Hidden will be submittend to server
         */
        ,defaultAutoCreate:{tag:'input', type:'hidden'}
        /**
         * @cfg {String} dtSeparator Date - Time separator. Used to split date and time (defaults to ' ' (space))
         */
        ,dtSeparator:' '
        /**
         * @cfg {String} hiddenFormat Format of datetime used to store value in hidden field
         * and submitted to server (defaults to 'Y-m-d H:i:s' that is mysql format)
         */
        ,hiddenFormat:'Y-m-d H:i:s'
        /**
         * @cfg {Boolean} otherToNow Set other field to now() if not explicly filled in (defaults to true)
         */
        ,otherToNow:true
        /**
         * @cfg {Boolean} emptyToNow Set field value to now on attempt to set empty value.
         * If it is true then setValue() sets value of field to current date and time (defaults to false)
         */
        /**
         * @cfg {String} timePosition Where the time field should be rendered. 'right' is suitable for forms
         * and 'below' is suitable if the field is used as the grid editor (defaults to 'right')
         */
        ,timePosition:'right' // valid values:'below', 'right'
        /**
         * @cfg {Function} timeValidator A custom validation function to be called during time field
         * validation (defaults to null)
         */
        ,timeValidator:null
        /**
         * @cfg {Number} timeWidth Width of time field in pixels (defaults to 100)
         */
        ,timeWidth:100
        /**
         * @cfg {String} dateFormat Format of DateField. Can be localized. (defaults to 'm/y/d')
         */
        ,dateFormat:'m/d/y'
        /**
         * @cfg {String} timeFormat Format of TimeField. Can be localized. (defaults to 'g:i A')
         */
        ,timeFormat:'g:i A'
        /**
         * @cfg {Object} dateConfig Config for DateField constructor.
         */
        /**
         * @cfg {Object} timeConfig Config for TimeField constructor.
         */

        // {{{
        /**
         * @private
         * creates DateField and TimeField and installs the necessary event handlers
         */
        ,initComponent:function() {
            // call parent initComponent
            Ext.ux.form.DateTime.superclass.initComponent.call(this);

            // create DateField
            var dateConfig = Ext.apply({}, {
                 id:this.id + '-date'
                ,format:this.dateFormat || Ext.form.DateField.prototype.format
                ,width:this.timeWidth
                ,selectOnFocus:this.selectOnFocus
                ,validator:this.dateValidator
                ,listeners:{
                      blur:{scope:this, fn:this.onBlur}
                     ,focus:{scope:this, fn:this.onFocus}
                }
            }, this.dateConfig);
            this.df = new Ext.form.DateField(dateConfig);
            this.df.ownerCt = this;
            delete(this.dateFormat);

            // create TimeField
            var timeConfig = Ext.apply({}, {
                 id:this.id + '-time'
                ,format:this.timeFormat || Ext.form.TimeField.prototype.format
                ,width:this.timeWidth
                ,selectOnFocus:this.selectOnFocus
                ,validator:this.timeValidator
                ,listeners:{
                      blur:{scope:this, fn:this.onBlur}
                     ,focus:{scope:this, fn:this.onFocus}
                }
            }, this.timeConfig);
            this.tf = new Ext.form.TimeField(timeConfig);
            this.tf.ownerCt = this;
            delete(this.timeFormat);

            // relay events
            this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
            this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);

            this.on('specialkey', this.onSpecialKey, this);

        } // eo function initComponent
        // }}}
        // {{{
        /**
         * @private
         * Renders underlying DateField and TimeField and provides a workaround for side error icon bug
         */
        ,onRender:function(ct, position) {
            // don't run more than once
            if(this.isRendered) {
                return;
            }

            // render underlying hidden field
            Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);

            // render DateField and TimeField
            // create bounding table
            var t;
            if('below' === this.timePosition || 'bellow' === this.timePosition) {
                t = Ext.DomHelper.append(ct, {tag:'table',style:'border-collapse:collapse',children:[
                     {tag:'tr',children:[{tag:'td', style:'padding-bottom:1px', cls:'ux-datetime-date'}]}
                    ,{tag:'tr',children:[{tag:'td', cls:'ux-datetime-time'}]}
                ]}, true);
            }
            else {
                t = Ext.DomHelper.append(ct, {tag:'table',style:'border-collapse:collapse',children:[
                    {tag:'tr',children:[
                        {tag:'td',style:'padding-right:4px', cls:'ux-datetime-date'},{tag:'td', cls:'ux-datetime-time'}
                    ]}
                ]}, true);
            }

            this.tableEl = t;
            this.wrap = t.wrap({cls:'x-form-field-wrap'});
    //        this.wrap = t.wrap();
            this.wrap.on("mousedown", this.onMouseDown, this, {delay:10});

            // render DateField & TimeField
            this.df.render(t.child('td.ux-datetime-date'));
            this.tf.render(t.child('td.ux-datetime-time'));

            // workaround for IE trigger misalignment bug
            // see http://extjs.com/forum/showthread.php?p=341075#post341075
    //        if(Ext.isIE && Ext.isStrict) {
    //            t.select('input').applyStyles({top:0});
    //        }

            this.df.el.swallowEvent(['keydown', 'keypress']);
            this.tf.el.swallowEvent(['keydown', 'keypress']);

            // create icon for side invalid errorIcon
            if('side' === this.msgTarget) {
                var elp = this.el.findParent('.x-form-element', 10, true);
                if(elp) {
                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                }

                var o = {
                     errorIcon:this.errorIcon
                    ,msgTarget:'side'
                    ,alignErrorIcon:this.alignErrorIcon.createDelegate(this)
                };
                Ext.apply(this.df, o);
                Ext.apply(this.tf, o);
    //            this.df.errorIcon = this.errorIcon;
    //            this.tf.errorIcon = this.errorIcon;
            }

            // setup name for submit
            this.el.dom.name = this.hiddenName || this.name || this.id;

            // prevent helper fields from being submitted
            this.df.el.dom.removeAttribute("name");
            this.tf.el.dom.removeAttribute("name");

            // we're rendered flag
            this.isRendered = true;

            // update hidden field
            this.updateHidden();

        } // eo function onRender
        // }}}
        // {{{
        /**
         * @private
         */
        ,adjustSize:Ext.BoxComponent.prototype.adjustSize
        // }}}
        // {{{
        /**
         * @private
         */
        ,alignErrorIcon:function() {
            this.errorIcon.alignTo(this.tableEl, 'tl-tr', [2, 0]);
        }
        // }}}
        // {{{
        /**
         * @private initializes internal dateValue
         */
        ,initDateValue:function() {
            this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
        }
        // }}}
        // {{{
        /**
         * Calls clearInvalid on the DateField and TimeField
         */
        ,clearInvalid:function(){
            this.df.clearInvalid();
            this.tf.clearInvalid();
        } // eo function clearInvalid
        // }}}
        // {{{
        /**
         * Calls markInvalid on both DateField and TimeField
         * @param {String} msg Invalid message to display
         */
        ,markInvalid:function(msg){
            this.df.markInvalid(msg);
            this.tf.markInvalid(msg);
        } // eo function markInvalid
        // }}}
        // {{{
        /**
         * @private
         * called from Component::destroy. 
         * Destroys all elements and removes all listeners we've created.
         */
        ,beforeDestroy:function() {
            if(this.isRendered) {
    //            this.removeAllListeners();
                this.wrap.removeAllListeners();
                this.wrap.remove();
                this.tableEl.remove();
                this.df.destroy();
                this.tf.destroy();
            }
        } // eo function beforeDestroy
        // }}}
        // {{{
        /**
         * Disable this component.
         * @return {Ext.Component} this
         */
        ,disable:function() {
            if(this.isRendered) {
                this.df.disabled = this.disabled;
                this.df.onDisable();
                this.tf.onDisable();
            }
            this.disabled = true;
            this.df.disabled = true;
            this.tf.disabled = true;
            this.fireEvent("disable", this);
            return this;
        } // eo function disable
        // }}}
        // {{{
        /**
         * Enable this component.
         * @return {Ext.Component} this
         */
        ,enable:function() {
            if(this.rendered){
                this.df.onEnable();
                this.tf.onEnable();
            }
            this.disabled = false;
            this.df.disabled = false;
            this.tf.disabled = false;
            this.fireEvent("enable", this);
            return this;
        } // eo function enable
        // }}}
        // {{{
        /**
         * @private Focus date filed
         */
        ,focus:function() {
            this.df.focus();
        } // eo function focus
        // }}}
        // {{{
        /**
         * @private
         */
        ,getPositionEl:function() {
            return this.wrap;
        }
        // }}}
        // {{{
        /**
         * @private
         */
        ,getResizeEl:function() {
            return this.wrap;
        }
        // }}}
        // {{{
        /**
         * @return {Date/String} Returns value of this field
         */
        ,getValue:function() {
            // create new instance of date
            return this.dateValue ? new Date(this.dateValue) : '';
        } // eo function getValue
        // }}}
        // {{{
        /**
         * @return {Boolean} true = valid, false = invalid
         * @private Calls isValid methods of underlying DateField and TimeField and returns the result
         */
        ,isValid:function() {
            return this.df.isValid() && this.tf.isValid();
        } // eo function isValid
        // }}}
        // {{{
        /**
         * Returns true if this component is visible
         * @return {boolean} 
         */
        ,isVisible : function(){
            return this.df.rendered && this.df.getActionEl().isVisible();
        } // eo function isVisible
        // }}}
        // {{{
        /** 
         * @private Handles blur event
         */
        ,onBlur:function(f) {
            // called by both DateField and TimeField blur events

            // revert focus to previous field if clicked in between
            if(this.wrapClick) {
                f.focus();
                this.wrapClick = false;
            }

            // update underlying value
            if(f === this.df) {
                this.updateDate();
            }
            else {
                this.updateTime();
            }
            this.updateHidden();

            this.validate();

            // fire events later
            (function() {
                if(!this.df.hasFocus && !this.tf.hasFocus) {
                    var v = this.getValue();
                    if(String(v) !== String(this.startValue)) {
                        this.fireEvent("change", this, v, this.startValue);
                    }
                    this.hasFocus = false;
                    this.fireEvent('blur', this);
                }
            }).defer(100, this);

        } // eo function onBlur
        // }}}
        // {{{
        /**
         * @private Handles focus event
         */
        ,onFocus:function() {
            if(!this.hasFocus){
                this.hasFocus = true;
                this.startValue = this.getValue();
                this.fireEvent("focus", this);
            }
        }
        // }}}
        // {{{
        /**
         * @private Just to prevent blur event when clicked in the middle of fields
         */
        ,onMouseDown:function(e) {
            if(!this.disabled) {
                this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
            }
        }
        // }}}
        // {{{
        /**
         * @private
         * Handles Tab and Shift-Tab events
         */
        ,onSpecialKey:function(t, e) {
            var key = e.getKey();
            if(key === e.TAB) {
                if(t === this.df && !e.shiftKey) {
                    e.stopEvent();
                    this.tf.focus();
                }
                if(t === this.tf && e.shiftKey) {
                    e.stopEvent();
                    this.df.focus();
                }
                this.updateValue();
            }
            // otherwise it misbehaves in editor grid
            if(key === e.ENTER) {
                this.updateValue();
            }

        } // eo function onSpecialKey
        // }}}
        // {{{
        /**
         * Resets the current field value to the originally loaded value 
         * and clears any validation messages. See Ext.form.BasicForm.trackResetOnLoad
         */
        ,reset:function() {
            this.df.setValue(this.originalValue);
            this.tf.setValue(this.originalValue);
        } // eo function reset
        // }}}
        // {{{
        /**
         * @private Sets the value of DateField
         */
        ,setDate:function(date) {
            this.df.setValue(date);
        } // eo function setDate
        // }}}
        // {{{
        /** 
         * @private Sets the value of TimeField
         */
        ,setTime:function(date) {
            this.tf.setValue(date);
        } // eo function setTime
        // }}}
        // {{{
        /**
         * @private
         * Sets correct sizes of underlying DateField and TimeField
         * With workarounds for IE bugs
         */
        ,setSize:function(w, h) {
            if(!w) {
                return;
            }
            if('below' === this.timePosition) {
                this.df.setSize(w, h);
                this.tf.setSize(w, h);
                if(Ext.isIE) {
                    this.df.el.up('td').setWidth(w);
                    this.tf.el.up('td').setWidth(w);
                }
            }
            else {
                this.df.setSize(w - this.timeWidth - 4, h);
                this.tf.setSize(this.timeWidth, h);

                if(Ext.isIE) {
                    this.df.el.up('td').setWidth(w - this.timeWidth - 4);
                    this.tf.el.up('td').setWidth(this.timeWidth);
                }
            }
        } // eo function setSize
        // }}}
        // {{{
        /**
         * @param {Mixed} val Value to set
         * Sets the value of this field
         */
        ,setValue:function(val) {
            if(!val && true === this.emptyToNow) {
                this.setValue(new Date());
                return;
            }
            else if(!val) {
                this.setDate('');
                this.setTime('');
                this.updateValue();
                return;
            }
            if ('number' === typeof val) {
              val = new Date(val);
            }
            else if('string' === typeof val && this.hiddenFormat) {
                val = Date.parseDate(val, this.hiddenFormat);
            }
            val = val ? val : new Date(1970, 0 ,1, 0, 0, 0);
            var da;
            if(val instanceof Date) {
                this.setDate(val);
                this.setTime(val);
                this.dateValue = new Date(Ext.isIE ? val.getTime() : val);
            }
            else {
                da = val.split(this.dtSeparator);
                this.setDate(da[0]);
                if(da[1]) {
                    if(da[2]) {
                        // add am/pm part back to time
                        da[1] += da[2];
                    }
                    this.setTime(da[1]);
                }
            }
            this.updateValue();
        } // eo function setValue
        // }}}
        // {{{
        /**
         * Hide or show this component by boolean
         * @return {Ext.Component} this
         */
        ,setVisible: function(visible){
            if(visible) {
                this.df.show();
                this.tf.show();
            }else{
                this.df.hide();
                this.tf.hide();
            }
            return this;
        } // eo function setVisible
        // }}}
        //{{{
        ,show:function() {
            return this.setVisible(true);
        } // eo function show
        //}}}
        //{{{
        ,hide:function() {
            return this.setVisible(false);
        } // eo function hide
        //}}}
        // {{{
        /**
         * @private Updates the date part
         */
        ,updateDate:function() {

            var d = this.df.getValue();
            if(d) {
                if(!(this.dateValue instanceof Date)) {
                    this.initDateValue();
                    if(!this.tf.getValue()) {
                        this.setTime(this.dateValue);
                    }
                }
                this.dateValue.setMonth(0); // because of leap years
                this.dateValue.setFullYear(d.getFullYear());
                this.dateValue.setMonth(d.getMonth(), d.getDate());
    //            this.dateValue.setDate(d.getDate());
            }
            else {
                this.dateValue = '';
                this.setTime('');
            }
        } // eo function updateDate
        // }}}
        // {{{
        /**
         * @private
         * Updates the time part
         */
        ,updateTime:function() {
            var t = this.tf.getValue();
            if(t && !(t instanceof Date)) {
                t = Date.parseDate(t, this.tf.format);
            }
            if(t && !this.df.getValue()) {
                this.initDateValue();
                this.setDate(this.dateValue);
            }
            if(this.dateValue instanceof Date) {
                if(t) {
                    this.dateValue.setHours(t.getHours());
                    this.dateValue.setMinutes(t.getMinutes());
                    this.dateValue.setSeconds(t.getSeconds());
                }
                else {
                    this.dateValue.setHours(0);
                    this.dateValue.setMinutes(0);
                    this.dateValue.setSeconds(0);
                }
            }
        } // eo function updateTime
        // }}}
        // {{{
        /**
         * @private Updates the underlying hidden field value
         */
        ,updateHidden:function() {
            if(this.isRendered) {
                var value = this.dateValue instanceof Date ? this.dateValue.format(this.hiddenFormat) : '';
                this.el.dom.value = value;
            }
        }
        // }}}
        // {{{
        /**
         * @private Updates all of Date, Time and Hidden
         */
        ,updateValue:function() {

            this.updateDate();
            this.updateTime();
            this.updateHidden();

            return;
        } // eo function updateValue
        // }}}
        // {{{
        /**
         * @return {Boolean} true = valid, false = invalid
         * calls validate methods of DateField and TimeField
         */
        ,validate:function() {
            return this.df.validate() && this.tf.validate();
        } // eo function validate
        // }}}
        // {{{
        /**
         * Returns renderer suitable to render this field
         * @param {Object} Column model config
         */
        ,renderer: function(field) {
            var format = field.editor.dateFormat || Ext.ux.form.DateTime.prototype.dateFormat;
            format += ' ' + (field.editor.timeFormat || Ext.ux.form.DateTime.prototype.timeFormat);
            var renderer = function(val) {
                var retval = Ext.util.Format.date(val, format);
                return retval;
            };
            return renderer;
        } // eo function renderer
        // }}}

    }); // eo extend

    // register xtype
    Ext.reg('xdatetime', Ext.ux.form.DateTime);

    // eof

    Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
    Ext.onReady(function() {
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
        var win = new Ext.Window({
             width:500
            ,id:'winid'
            ,height:300
            ,layout:'fit'
            ,border:false
            ,closable:false
            ,title:'Ext.ux.form.DateTime Example'
            ,items:[{
                 xtype:'form'
                ,frame:true
                ,labelWidth:100
                ,id:'form'
                ,url:'.'
                ,items:[{
                     xtype:'xdatetime'
                    ,id:'dtf'
                    ,fieldLabel:'Date & Time'
    //                ,width:360
                    ,anchor:'-18'
                    ,timeFormat:'H:i:s'
                    ,timeConfig: {
                         altFormats:'H:i:s'
                        ,allowBlank:true    
                    }
                    ,dateFormat:'d.n.Y'
                    ,dateConfig: {
                         altFormats:'Y-m-d|Y-n-d'
                        ,allowBlank:true    
                    }
                }]
            }]
            ,buttons:[{
                 text:'Submit'
                ,handler:function() {
                    Ext.getCmp('form').getForm().submit();
                }
            }]
        });
        win.show();
    });
        </script>
        <title>Ext.ux.form.DateTime Example</title>
    </head>
    <body>
    </body>
    </html> 
    Original post:

    Hi all,

    inspired by this thread: http://extjs.com/forum/showthread.php?t=20902 and being in urgent necessity I've written DateTime field that supports anchoring and user definable formats. Here is the self contained code; give it a try please:

    EDIT: old code deleted.

  2. #2
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    0
    DigitalSkyline is on a distinguished road

      0  

    Default


    Is it the same as this?
    Screenshot:



    If so Awesome! Sorry no I haven't tried it yet but will be very useful I think.

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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


    Basically yes, but the other version doesn't support anchoring and has only one fixed format for date and time.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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


    Snapshot:
    Attached Images

  5. #5
    Ext User
    Join Date
    Apr 2007
    Posts
    122
    Vote Rating
    0
    cocorossello is on a distinguished road

      0  

    Default


    Awesome , Thx!

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    33
    Vote Rating
    0
    magunes117 is on a distinguished road

      0  

    Default


    Thanks, its great. But it doesn't work in IE6 (or IE7).

  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    rlx is on a distinguished road

      0  

    Default


    i tried to use the extension in my form but keep getting an exception on setvalue, if the element is not yet rendered (updatevalue tries to access the dom, which does not exist yet). is there any workaround for that?

    this.dtGoodAfterTime = new Ext.ux.form.DateTime(
    {
    fieldLabel: _('Good After'),
    name: 'goodaftertime',
    id: 'goodaftertime',
    width: 165,
    timeFormat:'H:i:s',
    timeConfig:
    {
    altFormats:'H:i:s',
    allowBlank: false
    },
    dateFormat:'m/d/y',
    dateConfig:
    {
    altFormats:'Y-m-d',
    allowBlank: false
    }
    });
    this.dtGoodAfterTime.setValue(new Date());

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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 rlx View Post
    i tried to use the extension in my form but keep getting an exception on setvalue, if the element is not yet rendered (updatevalue tries to access the dom, which does not exist yet). is there any workaround for that?
    What standard Ext form fields do when you try to setValue before rendered?

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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


    Ok, I see it now. They test if component is rendered and access dom only if yes. I'll fix it soon.

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,132
    Vote Rating
    322
    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


    rlx, try it now - I've updated it but I haven't tried to call setValue() before rendered. Hopefully it works now.

Thread Participants: 208

  1. galdaka (1 Post)
  2. grEvenX (1 Post)
  3. wolverine4277 (1 Post)
  4. berend (1 Post)
  5. umlbuzzard (1 Post)
  6. mystix (8 Posts)
  7. dawesi (4 Posts)
  8. gabbay (1 Post)
  9. JorisA (2 Posts)
  10. burn (1 Post)
  11. wenner (6 Posts)
  12. DigitalSkyline (1 Post)
  13. ChrisR (3 Posts)
  14. cocorossello (1 Post)
  15. 72 (1 Post)
  16. akannu (1 Post)
  17. danh2000 (2 Posts)
  18. DeeZ (1 Post)
  19. daviscabral (3 Posts)
  20. sharman (1 Post)
  21. ajaxE (3 Posts)
  22. ryedin (3 Posts)
  23. dandfra (5 Posts)
  24. anjelika (1 Post)
  25. MaximGB (1 Post)
  26. chernomorez (1 Post)
  27. smokeman (1 Post)
  28. FoGhost (1 Post)
  29. jcwatson11 (4 Posts)
  30. kevinwu8 (11 Posts)
  31. magunes117 (4 Posts)
  32. Barius (2 Posts)
  33. linizou (2 Posts)
  34. Clever Cutter (1 Post)
  35. Rui Lopes (3 Posts)
  36. henryli86 (1 Post)
  37. dima (1 Post)
  38. KevinChristensen (1 Post)
  39. rlx (1 Post)
  40. derbbre (1 Post)
  41. aacraig (5 Posts)
  42. kafsinkaf (1 Post)
  43. durlabh (5 Posts)
  44. Egor (1 Post)
  45. keypoint (2 Posts)
  46. elDub (7 Posts)
  47. anotherpit (3 Posts)
  48. sean.zhou (9 Posts)
  49. x51596 (1 Post)
  50. ray007 (2 Posts)
  51. seethrubob (1 Post)
  52. Gerrat (2 Posts)
  53. dphu (2 Posts)
  54. multiversal (1 Post)
  55. atascon (2 Posts)
  56. michaelc (3 Posts)
  57. adinata (2 Posts)
  58. jburnhams (1 Post)
  59. Hani79 (6 Posts)
  60. dearsina (1 Post)
  61. gfuture (1 Post)
  62. relix01 (3 Posts)
  63. ttony (2 Posts)
  64. danderson (3 Posts)
  65. marco76 (5 Posts)
  66. tarini (4 Posts)
  67. dorgan (5 Posts)
  68. acontreras (3 Posts)
  69. lobo-tuerto (4 Posts)
  70. trancee (1 Post)
  71. calavera (1 Post)
  72. broutard (1 Post)
  73. httpdotcom (2 Posts)
  74. Stefan B (7 Posts)
  75. vilivili (3 Posts)
  76. masterbuddha (2 Posts)
  77. sinma (1 Post)
  78. incaic (2 Posts)
  79. nbourdeau (7 Posts)
  80. miles.huang (1 Post)
  81. radtad (9 Posts)
  82. jenner (1 Post)
  83. demon222 (1 Post)
  84. Paul Middelkoop (1 Post)
  85. PremiereGlobal (3 Posts)
  86. qlegrand (4 Posts)
  87. LedrickLeron (2 Posts)
  88. dirkr (4 Posts)
  89. rhytha (1 Post)
  90. infinit (1 Post)
  91. ClemsonJeeper (6 Posts)
  92. conorarmstrong (2 Posts)
  93. mtrax (1 Post)
  94. ignatius (3 Posts)
  95. brenda (1 Post)
  96. xavierg (1 Post)
  97. vcastel (5 Posts)
  98. Arthur.Blake (4 Posts)
  99. dgms (1 Post)
  100. bjw5392 (2 Posts)
  101. Stripeman (2 Posts)
  102. EzBulka (2 Posts)
  103. wuschba (4 Posts)
  104. NoahK17 (3 Posts)
  105. Remy (11 Posts)
  106. predragp (1 Post)
  107. Barbanek (1 Post)
  108. johnymutton (3 Posts)
  109. abraxxa (28 Posts)
  110. cvieira (2 Posts)
  111. smithrp (1 Post)
  112. Rotomaul (1 Post)
  113. nebbian (2 Posts)
  114. tubinee (3 Posts)
  115. jhoni.chen (1 Post)
  116. snehat (1 Post)
  117. kevinconaway (1 Post)
  118. kristalgic (1 Post)
  119. hAmpzter (6 Posts)
  120. mono blaine (5 Posts)
  121. rhuanca (2 Posts)
  122. Akamy2kidsmom (2 Posts)
  123. haloween (1 Post)
  124. shiv (9 Posts)
  125. dekely (12 Posts)
  126. aborjinos (1 Post)
  127. canxss (6 Posts)
  128. khewuwei (2 Posts)
  129. lakshmi (4 Posts)
  130. notdet (3 Posts)
  131. dizor (1 Post)
  132. mschwartz (5 Posts)
  133. sprestel (1 Post)
  134. JAnderson (1 Post)
  135. maiconschelter (1 Post)
  136. oegozi (6 Posts)
  137. Dumas (3 Posts)
  138. jgeewax (1 Post)
  139. ylaroche (5 Posts)
  140. marcvdm (2 Posts)
  141. Grolubao (2 Posts)
  142. uptodate (2 Posts)
  143. Jangla (6 Posts)
  144. rob_howe (1 Post)
  145. pibree (1 Post)
  146. einavb (2 Posts)
  147. bbirtle (1 Post)
  148. annextjs (7 Posts)
  149. ampnezz (2 Posts)
  150. mogwai (1 Post)
  151. igreg (1 Post)
  152. dthemistokleous (1 Post)
  153. quicksilver_in (2 Posts)
  154. Opsone (2 Posts)
  155. Gonfi (2 Posts)
  156. Keylan (1 Post)
  157. Sigma (1 Post)
  158. advarot (1 Post)
  159. Scott Murawski (4 Posts)
  160. isit.gd (1 Post)
  161. realjax (3 Posts)
  162. tigerfoot (8 Posts)
  163. harel (2 Posts)
  164. iryndin (1 Post)
  165. roger.harrington (1 Post)
  166. cscagliola (2 Posts)
  167. Kirill_Sychin (3 Posts)
  168. mrjoltcola (5 Posts)
  169. innerbreath (1 Post)
  170. mebuzzme (1 Post)
  171. sramirez (1 Post)
  172. ilevina (2 Posts)
  173. boyan.dimitrov (1 Post)
  174. lwarring (1 Post)
  175. codeable (1 Post)
  176. ozum (2 Posts)
  177. chenzero (4 Posts)
  178. erdna (4 Posts)
  179. icarey (2 Posts)
  180. heratech (1 Post)
  181. stevek (1 Post)
  182. DanielT (2 Posts)
  183. seand (1 Post)
  184. smartbinary (2 Posts)
  185. taporari (2 Posts)
  186. Lobo (2 Posts)
  187. daydreamer01 (1 Post)
  188. oldtenen (1 Post)
  189. krishnaswamy (1 Post)
  190. ajmas (1 Post)
  191. maina (1 Post)
  192. Joe Kuan (3 Posts)
  193. easley (3 Posts)
  194. marc123 (2 Posts)
  195. njsnow7 (1 Post)
  196. I_Leising (1 Post)
  197. olka (1 Post)
  198. bee (1 Post)
  199. jonaldomo (1 Post)
  200. ithompson (2 Posts)
  201. Jojo79 (2 Posts)
  202. zhaoshixuan (1 Post)
  203. SSzretter (1 Post)
  204. amsalak (1 Post)
  205. abc_check (1 Post)
  206. Deadlock (1 Post)
  207. kirlisakal (1 Post)
  208. endino (1 Post)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar