You found a bug! We've classified it as EXTJS-6943 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.1.1 GA] Daterange VType cycling if both fields are configured with "value"

    [4.1.1 GA] Daterange VType cycling if both fields are configured with "value"


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1 GA
    Browser versions tested against:
    • Chrome
    Description:
    • Daterange VType causes
      Uncaught RangeError: Maximum call stack size exceeded

      if the both fields are configured with "value".
    • I understand it is just an example of custom validation and you can ignore that bug. Just I decided to report.
    • By the way, I can't see any fields when running the online example.

    Steps to reproduce the problem:
    • Just run the sample in Chrome with the change I described in "Test case".
    The result that was expected:
    • No JS error.
    The result that occurs instead:
    • A JS
      Uncaught RangeError: Maximum call stack size exceeded

      error occurs.
    Test Case:

    Define "value" for the both fields.
    Code:
    var dr = Ext.create('Ext.form.Panel', {
        renderTo: 'dr',
        frame: true,
        title: 'Date Range',
        bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            labelWidth: 125,
            msgTarget: 'side',
            autoFitErrors: false
        },
        defaults: {
            width: 300
        },
        defaultType: 'datefield',
        items: [{
            fieldLabel: 'Start Date',
            name: 'startdt',
            itemId: 'startdt',
            vtype: 'daterange',
            endDateField: 'enddt' // id of the end date field
            , value: new Date()
        }, {
            fieldLabel: 'End Date',
            name: 'enddt',
            itemId: 'enddt',
            vtype: 'daterange',
            startDateField: 'startdt' // id of the start date field
            , value: new Date() 
        }]
    });


    HELPFUL INFORMATION


    Possible fix:
    • I was able to fix it replacing
    Code:
    start.validate();
    this.dateRangeMax = date;
    with
    Code:
    this.dateRangeMax = date;
    start.validate();
    and
    Code:
    end.validate();
    this.dateRangeMin = date;
    wtih
    Code:
    this.dateRangeMin = date;
    end.validate();
    Here is the result:
    Code:
    daterange: function(val, field) {
        var date = field.parseDate(val);
    
        if (!date) {
            return false;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = field.up('form').down('#' + field.startDateField);
            start.setMaxValue(date);
            this.dateRangeMax = date;
            start.validate();
                    
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = field.up('form').down('#' + field.endDateField);
            end.setMinValue(date);
            this.dateRangeMin = date;
            end.validate();
                    
        }
        /*
            * Always return true since we're only using this vtype to set the
            * min/max allowed values (these are tested for after the vtype test)
            */
        return true;
    }
    By the way, somewhere there is "this", somewhere - "field". A bit inconsistent.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    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


    That example is working 100% for me in 4.1.1
    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.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Yes, it works fine with no changes.

    But did you try to add
    Code:
    , value: new Date()
    for the both fields?

    Also can you confirm this?
    Quote Originally Posted by Daniil View Post
    • By the way, I can't see any fields when running the online example.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    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


    Quote Originally Posted by Daniil View Post
    Yes, it works fine with no changes.

    But did you try to add
    Code:
    , value: new Date()
    for the both fields?
    Odd, copied and pasted your code and IDEA didn't like that line with comma in it and didn't paste it into the code. Now I get that error.

    Quote Originally Posted by Daniil View Post
    Also can you confirm this?
    I see the fields:

    Screen Shot 2012-08-06 at 10.23.33 AM.png
    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.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thanks for opening a bug ticket.

    Quote Originally Posted by mitchellsimoens View Post
    I see the fields:
    Weird, I can't see them in all - Chrome, FireFox, IE. Not sure it can somehow affect - there is Windows 7 on my end.

    No errors in the console.

    Also I tried to clear the cache in all browsers - no effect. Can a "correct" page be cached on your side?

    I just discovered: a response of adv-types.js request is empty (inspected using FireBug). I get an empty screen clicking the JS file "See adv-vtypes.js.".

    Request URL is
    http://docs.sencha.com/ext-js/4-1/ex.../adv-vtypes.js

    The status is "200 OK".

    So, probably, you get that script from the cache, isn't that so?

    By the way, there is a simple way to cause re-requesting an example? The following scenario:

    1. I open some example.
    2. Go to its script calling "See *.js".
    3. Is there any simple way to get the example back without closing the tab? Would be comfortable.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    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


    In Chrome I turn caching off. Looking at a fresh install of Safari 6 from a week ago I see it no problems there also. When I turn my Windows machine on next I will look there but shouldn't make a difference at all. Firebug should tell you if it came form cache anyway.
    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.

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    When I turn my Windows machine on next I will look there but shouldn't make a difference at all.
    Agree.

    Quote Originally Posted by mitchellsimoens View Post
    Firebug should tell you if it came form cache anyway.
    Yes, tells. It's not cached on my end, the response status is "200". This link
    http://docs.sencha.com/ext-js/4-1/ex.../adv-vtypes.js
    just returns an empty response.

    Could you try directly this link and look at a response status?

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    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


    Just testing on my Windows 7 box using Chrome and Firefox that example loads up, the direct link has full source and returns 200
    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.

  9. #9
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Weird that it is not reproducible on your end.

    I just asked my colleague to give it a try on his PC - he has the same as I do.

    By the way, we just discovered that adv-vtypes.js is just not attached to the adv-vtypes.html. Here is how it looks on our end:

    adv-vtypes.html
    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Advanced VType Examples</title>
    
        <!-- ExtJS -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!-- Shared -->
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    
        <!-- GC -->
    
    
        <!-- Example -->
        <FONT size="1">[AD]</FONT>
        <style type="text/css">
            #dr, #pw {
                margin-bottom: 30px;
            }
        </style>
    </head>
    
    <body>
        <h1>Advanced Validation Examples Using VTypes</h1>
    
        <div id="dr">
            <p>The first example shows two date fields acting as a date range.  Selecting an initial
            date sets the minimum value for the end field.  Selecting an ending date sets a maximum
            value for the start field.</p>
        </div>
    
        <div id="pw">
            <p>This second example shows a password verification, the second value must be equivalent
            to the first to validate.</p>
        </div>
    
        <p>The js is not minified so it is readable. See <a href="adv-vtypes.js">adv-vtypes.js</a>.</p>
    </body>
    </html>
    And my colleague is also getting an empty response for the direct JS link.

    Sure, not a problem for us, just would be great to get to the bottom of an issue

  10. #10
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi Mitchell,

    Could you kindly inform is there any time-frame for this issue?

    Please note that I suggested a possible fix in the original post It doesn't look bad...
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2